Horizontal center of div elements in CSS text Images

Text center, text vertical center horizontal center, picture center, picture horizontal center vertical center, block element vertical center? Css Center is a common issue when we are doing front-end development. There are many situations, and there are different solutions for different situations. The horizontal center method is relatively easy to set through css, and the vertical center is relatively tricky.

Let's talk about the different situations and Solutions of horizontal center.

1. the horizontal center of text, images, and other intra-row elements is relatively simple. You can set a text-align: centent attribute for the parent element to horizontally center the element.

2. How do I set horizontal center for block-level elements with fixed width? The setting method is not difficult. You can set the margin, margin: 0 auto; To realize horizontal center of block-level elements with fixed width.

3. There are multiple ways to set horizontal center for block-level elements with uncertain width. Here we will introduce three methods for you.

The first method is to use table as a container. This method is not recommended because meaningless labels are added. Here is a brief introduction. The Table label itself is not a block-level element. If we do not set the table width, the width in the Table is supported by the width of its internal elements. But even if we do not set the table width, we can directly set the table's margin: 0 auto; To achieve horizontal center! In this way, we can indirectly center the content in the table by setting the horizontal center of the table.

In the second method, compared with the table method, the advantage is that you do not need to add silent labels to simplify the depth of tag nesting. This idea is like this. By changing the display attribute value of the block-level element to the inline type, and then setting text-align: center to center. This method also makes it possible to change block-level elements into intra-row elements, which have fewer functions than block elements. For example, if you set the length and width, there may be some restrictions in the use of the project, you can choose your own.

The following is the third method. Set floating float for the parent element, set the position attribute of the parent element to relative and left: 50%, and set position: relative and left:-50% for the child element to realize horizontal center. This advantage is that block-level elements can still be displayed in the form of display: block, without adding meaningless labels or nested depth. It is true that position: relative; has some side effects. The following is the instance code of the third method, which can be placed in the body tag.

<Div style = "width: 400px; height: 300px; background: #333;">

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

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

</Ul>

</Div>

The three methods are widely used and all have disadvantages and advantages. The method you choose depends on the situation. This section describes the horizontal center of Css text image block elements.

This article was first launched at: frontend