1. Horizontal centering-inline elements
In our actual work, we often encounter scenes that require horizontal centering. For example, for the sake of beauty, the titles of articles are generally displayed horizontally.
Here we score two cases: 行内元素again 块状元素, the block elements are divided into fixed-width block elements and indefinite-width block elements. Today, let ’s first understand how to horizontally center the elements in the line?
If the element is set to text, pictures, when inline elements, etc., is through to the middle level of the parent element is set text-align:centerto achieve. (Parent element and child elements: as in the following html code, the div is the parent element of the text "I want to be horizontally centered in the parent container". Conversely, this text is the child element of the div)
HTML code:
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css code:
<style>
.txtCenter{
text-align:center;
}
</style>
2. Horizontal center setting-fixed width block element
When the element is set to 块状元素the time used text-align：centerwill not work, then also two possibilities: fixed width block elements and the indefinite wide block elements .
In this section, we first talk about fixed-width block elements. (Fixed block elements: The width of block elements is a fixed value.)
Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto". Let's look at an example of setting the div block element to be centered horizontally:
HTML code:
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css code:
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
It can also be written as:
margin-left:auto;
margin-right:auto;
Note: The "up and down margin" of the element can be set at will.
3. Horizontal centering summary-indefinite wide block element method (1)
In actual work, we will encounter the need to “不定宽度的块状元素”center the settings, such as page navigation on the web page, because the number of pages is uncertain, so we can not limit its flexibility by setting the width. ( 不定宽块状元素: The width of block elements is not fixed.)
There are three ways to center a block element of indefinite width (all of these three methods are currently used):
- Join
tablelabel - Set
display: inlineMethod: Similar to the first, to show the type of the line elements , the larger elements of adventitious property - Set
position:relativeandleft:50%: using relative positioning mode, the 50% left shift elements, i.e., to achieve the object centered
In this section we will talk about the first method:
Why choose method one to add a tabletag? It is to make use tableof the length adaptability of the tag —that is, it does not define its length nor default the length of the parent element body (the length of the table is determined by the length of its inner text), so it can be regarded as a fixed-width block element , And then use marginthe method of centering with a fixed width block to center it horizontally.
The first step: add a table tag (including <tbody>、<tr>、<td>) to the centered element that needs to be set .
The second step: set the "left and right margin center" for this table (this is the same as the method of fixed-width block elements).
Examples are as follows:
HTML code:
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css code:
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
4. Horizontal centering summary-indefinite wide block element method (2)
In addition to inserting tabletags mentioned in the previous section , you can center an indefinitely wide block element horizontally. This section introduces a second way to achieve this effect. Change the displaytype of the element to an inline element and set it directly using its attributes.
The second method: change the block-level elements displayof inlinethe type (inline elements to display) and use text-align:centerto achieve centering effect. The following example:
HTML code:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css code:
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
Advantages compared to the first method of this approach is no semantic tags do not increase, but there are some problems: it will block the element displaytype to inlinebecome an inline elements, some less so features such as setting Length value.
5. Horizontal centering summary-indefinite wide block element method (3)
In addition to inserting table tags and changing the displaytype of elements mentioned in the previous two sections , you can center the horizontal elements of indefinite width. This section introduces the third method to achieve this effect, setting floating and relative positioning.
Method three: by setting a parent element float, then set the parent element position:relativeand the left:50%child elements arranged position:relativeand left: -50%implemented centered horizontally.
We can understand this: Imagine that the parent layer of the ul layer (the div layer in the following example) has a bisector in the middle to divide the parent layer (div layer) of the ul layer into two equal parts. The css code of the ul layer is to divide the ul layer The leftmost end of the aligns with the bisector of the parent layer (div layer) of the ul layer; the css code of the li layer aligns the bisector of the li layer with the leftmost end of the ul layer (also the bisector of the div layer) to achieve The center of the li layer.
code show as below:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css code:
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
These three methods are widely used, and each has advantages and disadvantages. Which method to choose depends on the specific situation.
6. Vertical centering-a single line of text with the height of the parent element determined
In our actual work, we will also encounter scenes where vertical centering is required . For example, when the headlines of many newspaper articles are on the left and right sides, they are often set to vertical centering for good user experience.
Here we score two cases: a single line of text with the height of the parent element , and multiple lines of text with the height of the parent element .
In this section, we first look at the first type of single-line text with a fixed height of the parent element. How to set it to be vertically centered?
Single line of text to determine the height of the parent element of the method is centered vertically by setting the parent element heightand the line-heighthighly consistent achieved. ( height: The height of the element line-height,: As the name implies, the line height (line spacing) refers to the distance between lines and the baseline between lines in the text).
line-heightAnd font-sizethe difference between the calculated values , become the CSS line spacing . Divided into two halves, added to the top and bottom of a text line.
This kind of text line height and block height bring a disadvantage: when the length of the text content is greater than the width of the block, there is content out of the block.
The following code:
<div class="container">
hi,imooc!
</div>
css code:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
7. Vertical centering-multi-line text with the height of the parent element determined (method one)
There are two methods for vertically centering multi-line text, pictures, etc. whose height is determined by the parent element:
Method 1: Use insert table(including tbody、tr、td)label, set at the same time vertical-align：middle.
There is an attribute vertical-alignin css for vertical centering . When the parent element sets this style, it will be inline-blockuseful for the child elements of the type. Let's look at an example:
HTML code:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css code:
table td{height:500px;background:#ccc}
Because the next td tag by default set to default vertical-alignto middle, so we do not need to explicitly set up.
8. Vertical centering-multi-line text with the height of the parent element determined (Method 2)
In addition to inserting the tablelabel mentioned in the previous section , you can vertically center the multi-line text of the height of the parent element. This section introduces another method to achieve this effect. However, this method has poor compatibility and only provides a reference for everyone to learn.
In Chrome, Firefox browser IE8 and above block-level elements may be provided displayas table-cell(a table setting display unit), the activation vertical-alignattribute is not supported but note IE6,7 this pattern, poor compatibility.
HTML code:
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css code:
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
The advantage of this method is that there is no need to add extra meaningless tags, but the disadvantages are also obvious, its compatibility is not very good, it is not compatible with IE6, 7 and this modification displayhas blockbecome table-cell, destroying the original block elements Nature.
9. Implicitly change the display type
An interesting phenomenon is to set one of the following two sentences for elements (regardless of the type of elements before, except display: none):
-
position : absolute
-
float : left 或 float:right
Briefly, as long as the one appearing in the html code two or more, the display elements are displayed automatically changes to the type of display: inline-block (block elements) show a manner, of course, elements may be provided widthand heighta, and The default width does not fill the parent element.
As the following code, little friends all know that a tag is inline elements, so setting it widthhas no effect, but set position:absoluteafter it.
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
css code
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
