div css horizontal centering implementation method_html/css_WEB-ITnose

1. Horizontal centering of inline elements such as text and pictures

Set text-align:center to the parent element; you can achieve centering, for example:

< ;div class="top">

Fly Free

To realize the four words of free flying For centering, just write .top{text-align:certer;}

2. To determine the horizontal centering of wide block-level elements

, you need to set the marin attribute, which is margin: 0 auto;

For example:

content

To achieve horizontal centering of the entire div block and define the block width as 70px, you need to write it in the style .top{width:70px; margin:0 auto;}

3. Horizontal centering of block-level elements with uncertain widths

Sometimes the size of the block is uncertain and changes. In this case, centering cannot be achieved using the margin attribute. To achieve this, there are three methods to solve it.

(First type): After defining the block element that needs to be centered as display:table, you can use margin to center it. For example:

• Content 1

Content 2

• Content 3

The number of li is uncertain, and the width of ul cannot be determined. To achieve centering, .footer ul{display:table;margin:0 auto;}

(second type) should be written in the style : Convert block elements to inline elements

and write .footer ul{display:inline;text-align:center;}

in the style. At this time, li should also change.footer ul li{display:inline;}

(Third method): Use relative positioning. This method is especially suitable when uploading images of different sizes but needs to be centered.

Follow the above example to achieve centering, you need to write .footer {position:relative; left:50%;} in the style

At this time li should also be converted into an inline element.