< reprint > Make CSS text picture div Element Center method of the horizontal center of several methods

Text Center, Text Vertical Center horizontal center, picture Center, picture Horizontal Center vertically center, block element Vertical Center? When we're doing front-end development, it's very common to have CSS centered. There are many kinds of situations, and different situations have different ways of solving them. The horizontal center of the way to solve the relatively easy to set through CSS, vertical centering is relatively tricky.

Let's take a look at the different situations of horizontal centering and different solutions.

1 text, picture, etc. the horizontal centering method of the elements in the line is relatively simple. Setting a Text-align:centent property directly to the parent element allows the element to be horizontally centered.

2 Determine the width of the block-level elements in the horizontal center how to set it? It is not difficult to set the method, you can set the margin, margin:0 Auto, this sentence to achieve the width of the block-level elements to center horizontally.

3 Indeterminate width of block-level elements to set the horizontal center of the method there are many, here are three ways to give you.

The first method is implemented using table as a container. It is certainly not recommended to use this method because it adds meaningless tags. Let's introduce a little bit here. The table tag itself is not a block-level element, and when we do not set the width of the table, the width of his inside is propped up by the width of his inner element. But even if we do not set the width of the table, directly set the table margin margin:0 auto; it can be horizontally centered! This allows us to center the contents indirectly by setting the table horizontally.

The second method, relative to the table method, has the advantage of not adding no semantic tags, simplifying the tag nesting depth. The idea is that by changing the display property value of the block-level element to the inline type, and then setting the Text-align:center to be centered. This approach also has a certain problem is that when the block-level elements are changed into inline elements, the inline elements are less functional than block elements. For example, set the length and width of the value, etc., in the application of the project may have some restrictions, we can choose their own.

Here is the third method. The Position property of the parent element is set to relative and left:50% by setting the float float to the parent element, and the child elements are set position:relative and left:-50% to achieve horizontal centering. The benefit is that the block-level elements can still be displayed as display:block, without adding meaningless tags and not adding nesting depths. The exact point is the setting of the position:relative, which brings some side effects. Here is the third method of the instance code, put in the body tag inside it.

<div style=”width:400px;height:300px;background:#333;”>

<ul style=”margin:0auto;float:left; position:relative; left:50%;list-style:none; padding:0;”>

<li style=”position:relative; left:-50%;float:left”>OKOKOKOKKOOKK</li>

</ul>

</div>

Three methods are widely used, all of which have shortcomings and advantages. The choice of which method to choose depends on the situation. CSS text picture block element Horizontal Center method is introduced here.

< reprint > Make CSS text picture div Element Center method of the horizontal center of several methods