Horizontal & vertically centered
Element centered
To a centered horizontal element (e.g.
Provided to the width of an element to prevent it from overflowing into the edge of the container.
By specifying the width of the element, and both sides of the blank margins evenly distributed:
div element is centered
Examples
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
Note: If no width attribute (or set to 100%), centered will not work.
Text Align
If only to text centered within the element, you can use text-align: center; centers the text
Examples
.center { text-align: center; border: 3px solid green; }
Tip: For more examples of text alignment, see the CSS Text chapter.
Align Pictures
Let the image centered, may be used margin: auto; and place it on the block element:
Examples
img { display: block; margin: auto; width: 40%; }
Justify - targeting methods used
We can use the position: absolute; attribute to align elements:
Agriculture tutorial code - learning is not only technology, but also dream !!!
Examples
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
Notes: absolutely positioned elements are removed from the normal flow, and can overlap elements.
NOTE: When using the position to align the element, the element will typically set the margin and padding. Such visible differences can be avoided in different browsers.
When using the position property, there is a problem in IE8 and earlier versions. If the container element (in our case is
Examples
body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
Justify - with float mode
We can also use the float property to align elements:
Examples
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
When the elements are aligned like this, on the margins and padding predefined elements it is a good idea. Such visible differences can be avoided in different browsers.
Note: If the child element is greater than the height of the parent element and the child element is set to float, then the child element will spill, this time you can use the "clearfix (Clear float)" to solve the problem.
We can add on the parent element overflow: auto; overflow to solve the problem of sub-elements:
Examples
.clearfix { overflow: auto; }
When using the float property, there is a problem in IE8 and earlier versions. If you omit the! DOCTYPE declaration, IE8 and earlier versions will add a 17px from the outside on the right. This seems to be reserved for the scroll bar space. When using the float property, always set the DOCTYPE declaration!:
Examples
body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; }
Vertically centered - the use of padding
CSS There are many ways to implement vertically centered. A simple way is to use the top of the head padding:
I'm vertically.
Examples
.center { padding: 70px 0; border: 3px solid green; }
To center the horizontal and vertical, and the padding can text-align: center:
I am both horizontally and vertically centered.
Examples
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Vertical center - using the line-height
I am a vertically centered.
Examples
.center {line-height: 200px; height: 200px; border: 3px solid green; text-align: center;} / * If multiple lines of text, add the following code: * / .center p {line-height: 1.5; display: inline-block; vertical-align: middle;}
Vertical center - the use position and transform
In addition to the use of padding and the line-height attribute, we can use to set the vertical center transform property:
Examples
.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Tip: More transform property can see 2D content flipped section. (Editor: Leilin Peng Source: network intrusion deleted)