Centering and Border Techniques AH279-AH280
- You can adjust the width of a block. The main div that contains all the paragraphs has its width set to 75 percent of the page body width.
- Center an element by setting margin-left and margin-right to auto. Set both the left and right margins to auto to make an element center inside its parent element. This trick is most frequently used to center divs and tables.
- Use margin-left to indent an entire paragraph. You can use margin-left or margin-right to give extra space between the border and the contents.
- Percentages refer to percent of the parent element. When you use percentages as the unit measurement for margins and padding, you're referring to the percentage of the parent element; so a marginleft of 50 percent leaves the left half of the element blank.
- Borders help you see what's happening. I added a border to the mainBody div to help you see that the div is centered.
- Setting the margins to auto doesn't center the text. It centers the div (or other block-level element). Use text-align: center to center text inside the div.
The code that demonstrates these ideas is shown here.
Centering
This paragraph is part of the centered main body.
This paragraph is indented to the right.
Andy's book - AH281 - From companion programs
The above did not work! - even when I changed mox to ms in the style section.
I suspect that it is black because image could not be found.
WebKit is a browser engine used in Apple's Safari browser and other products.
wikipedia WebKit
CSS border-image Property gives examples.
This is the big test whether border image has worked.
The following was copied from W3 source (Link given above).
The border-image-repeat Property
The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched:
border-image-repeat: repeat:
Here, the image tiles to fill the area. Tiles are divided if necessary.
border-image-repeat: round:
Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.
border-image-repeat: stretch (default):
Here, the image is stretched to fill the area.
Here is the original image:
Note: Internet Explorer 10, and earlier versions, do not support the border-image-repeat property.