,

...

,

,
,

, < ;table>,

,

,

Similarly, you can also change block-level elements into inline elements through the following code:

display: inline ;

3. Introduction to inline block elements

Inline block elements, similar to inline elements, can be displayed on one line. Note: The height, width, line height, and top and bottom margins of the element can all be set.

Inline block elements include these: ,

display: inline-block;

2. Centering Method

a. Use the left and right margin adaptive method: margin: 0 auto; /*Using this method needs to become an inline block element* and requires a fixed width*/

b. Also use the left and right margin methods:

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px; /*250px is the width of the element divided by 2, and needs to be positioned*/

c. The parent element sets text-align: center; /*Use This method needs to be changed into an inline element */

d. For elements with uncertain width, you can put a table tag on the outer layer, and then use margin: 0 auto; to center the table :

table{

　margin: 0 auto;

}

HTML code:

< table>

                                                         class="center">

I want to center it horizontally!

e. For elements with uncertain width, position it and the parent element, set left: -50% and left: 50% respectively, and then achieve horizontal Center:

.father{

position: relative;

left:50%;

width: 960px;

height: 300px;

background: yellow; }

.children{

Height: 30px;

Background:#ccc;

Position: relative;

left:-50%; ：

🎜>