How to use the recording text-align vertically centered with vertical-align attribute of the element in the container.
Although the text-align and vertical-align elements are provided inside the alignment, but also the use of two slightly different.
Before discussing both usage, we first need to understand the classification of elements.
Block elements: an exclusive line, width and height can be set, the standard box model, when the container is generally used.
Inline elements: a plurality of element rows are in a row, and when it encounters the edge will wrap or line breaks, its width and height we are not defined, it changes with the content.
Inline-block elements: both block element characteristics, but also the characteristics of inline elements.
text-align text elements are provided horizontal alignment.
Its role object is a text, the text control, can not afford the effect of the block elements and the like, so that only the contents of the block element (e.g., text within tags p: p to make text centered within the tag) is centered relative to the block elements
vertical-align setting is the vertical alignment of the elements.
It is the object of the action element; it can only act on the inline inline or block element. This property is aligned relative to the baseline, the baseline introduce, on the map:
That is the position in the base by the intermediate element, is used when the vertical-align property, because it defines an inline element with its own baseline row baseline aligned accordingly, so when disposed vertically relative to the parent element of the element centered, if it is only one element in the parent element, there is no way to be vertically centered in the parent element. Then you need a ruler (both sibling elements), it is aligned relative to the scale to achieve centering effect.
How to set up a horizontal element vertically centered in the parent element:
1. Write to its parent element text-align property;
2. To center the element into its type-Block inline;
3. centering element to add vertical-align attribute;
4. Add a "ruler", both of the sibling elements (span, etc.), to their mutual centering element vertically centered
care in editing can be no space between the scale and the need for the transport of the middle element;
scale to be added:
the display : inline-Block;
width: 0; (hidden object scale)
height: 100% (high parent element, both the centerline position the center position);
vertical-align = left: Middle;
example: let div1-1 vertically aligned horizontal div1 , together with the background color to distinguish.
<div class="div1">div1
<div class="div1-1">div2</div><span></span>
</div>
CSS part:
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 150px;
background: blue;
margin: 20px 20px;
text-align: center;
}
.div1-1{
width: 100px;
height: 100px;
background: red;
display: inline-block;
vertical-align: middle;
}
.div1 span{
display: inline-block;
width: 0px;
height: 100%;
background: #0681D0;
vertical-align: middle;
}
Renderings:
