How to set text alignment in css

Method: 1. Use "text-align:center" or "margin:0 auto" to set the horizontal center alignment; 2. Use "line-height:value" or "display:table-cell;vertical- align:middle" sets vertical center alignment.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Horizontal centering:

(1). Horizontal centering of inline elements?

If the set element is text, picture, etc. Inline elements, Set text-align:center in the parent element to achieve The inline elements are horizontally centered. Set the display of the child element to inline-block so that the child element becomes an inline element

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2) Horizontal centering of block elements (fixed width)

When the element being set is a fixed-width block-level element, using text-align: center will not work. Centering can be achieved by setting the "left and right margin" value to "auto".

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

(3)Horizontal centering of block elements (indefinite width)

We will encounter this in actual work It is necessary to set the centering for "block-level elements with variable width", such as paging navigation on a web page. Because the number of paging is uncertain, we cannot limit its flexibility by setting the width.

You can directly set text-align:center to block-level elements of variable width to achieve this, or you can add text-align:center to the parent element to achieve the centering effect.

When the width of the variable-width block-level element does not occupy one line, you can set the display to inline type or inline-block (set to inline element display or inline block element)

.child{
  width: 200px;
  margin: 0 auto;
}

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

2. Vertical centering:

is the same as horizontal centering. Here we want to talk about vertical centering. First set two conditions, namely The parent element is Box container and height has been set

Scenario 1: The child element is an inline element, and the height is stretched by its content

In this case, you need to set the line-height of the parent element to its height to vertically center the child element

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

Scenario 2: The child element is a block-level element but the height of the child element is not set. In this case, the height of the child element is actually unknown and cannot be adjusted by calculating the padding or margin, but there are still some solutions.

Solved by setting display:table-cell;vertical-align:middle to the parent element

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

Result

Scenario 3: The child element is a block-level element and the height has been set

Calculate the margin-top or margin-bottom of the child element, the calculation method is parent (element height-child element height)/2

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

<div class="wrap ">
    <div class="div1">111111</div>
</div>

Result

Recommended tutorial: "CSS Video Tutorial"

The above is the detailed content of How to set text alignment in css. For more information, please follow other related articles on the PHP Chinese website!