Some properties of css

1 Horizontal centering of text

<style type="text/css">
        div
        {
            display:inline-block;
            width:500px;
            height:50px;
            line-height:50px;
            text-align:center; /*Realize the horizontal centering of the text inside the div element*/
            border:1px dashed gray;
        }
    </style>
</head>
<body>
    <div> CSS achieves the horizontal centering of a single line of text: text-align: center;</div>

2 Centering block elements:
ensure that both margin-left and margin-right are auto, which can ensure that the block element is centered horizontally; if you want to use margin:0:auto to center the block element, you must
specify the width of the element;

<style type="text/css">
        div
        {
            margin:0 auto;
           width:80%;
            height:100px;
            border:1px solid gray;
        }
    </style>
</head>

3 Inline elements:
use text-align:center in the play;

<style type="text/css">
        div{text-align:center;}
    </style>
</head>
<body>
    <div><strong>strong元素</strong></div>
    <div><span>span元素</span></div>
    <div><a href="#">a元素</a></div>

4 Centering of INLINE-BLOCK elements, such as pictures

<style type="text/css">
        body{text-align:center;}
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border:1px solid gray;
        }
    </style>

5 Vertical centering
   1) Vertical centering of a single line of text:
    define the line-height and height attribute values to be equal

<style type="text/css">
        div
        {
            height:100px;
            line-height:100px;
            border:1px solid gray;
        }
</style>

   2) Multi-line text
       If the height of the parent element is fixed, the text may be two or more lines, then

<style type="text/css">
        p
        {
            display:table-cell;
            vertical-align:middle;
            width:400px;
            height:120px;
            border:1px dashed gray;
        }
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>Sasha Osha Sasha Sasha<br />
Top, top, top, top, top, etc.<br />
ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah </span>
</p>

Some properties of css

Guess you like