Home > Article > Web Front-end > CSS style design tips (horizontal centering, vertical centering)_html/css_WEB-ITnose
CSS style design tips (horizontal centering, vertical centering)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:191515browse
Horizontal center setting
(If some phrases are unfamiliar, you can quickly browse through the essays I posted "html common tags", "CSS Summary (Part 1, 2, and 2)", and review it again).
☆Horizontal centering setting - inline elements
In actual work, we often encounter scenarios where we need to set horizontal centering. Now let’s summarize how to set horizontal centering of.
If the set element is an inline element such as text or picture, horizontal centering is achieved by setting text-align:center to the parent element. The following code:
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 margin:20px;10 }11 div.txtCenter{12 text-align:center;13 }14 </style>15 </head>16 <body>17 <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>18 </body>19 </html>
The rendering is as follows:
☆ Horizontal centering setting - fixed-width block element
When the element to be set is a block element, text-align: center will not work. There are two situations: fixed-width block Shape elements and block elements of variable width. Let’s take a look at fixed-width block elements first.
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 horizontally centered:
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 width:500px;10 margin:20px auto;11 }12 </style>13 </head>14 <body>15 <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>16 </body>17 </html>
Note: the " The upper and lower margins can be set at will.
The rendering is as follows:
☆Horizontal centering setting - variable width block element method (1)
In practice At work, we will encounter the need to set the center for "block elements with variable widths", such as pagination navigation on a web page. Because the number of paginations is uncertain, we cannot limit its flexibility by setting the width.
There are three methods for centering block elements with variable widths (these three methods are currently used more often):
1. Add the table tag
2. Set the display; inline method
3. Set position:relative and left:50%;
Let’s look at the first method first:
Step 1: Add a table tag (including 92cee25da80fac49f6fb6eec5fd2c22a, a34de1251f0d9fe1e645927f19a896e8) outside the centered element that needs to be set. ,b6c5a531a458a2e790c1fd6421739d1c ).
Step 2: Set the "left and right margins to be centered" for this table (this is the same method as the fixed-width block element).
For example:
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 table{ 8 margin:0 auto; 9 }10 ul{list-style:none;margin:0;padding:0;}11 li{float:left;display:inline;margin-right:8px;}12 </style>13 </head>14 <body>15 <div>16 <table>17 <tbody>18 <tr><td>19 <ul>20 <li><a href="#">1</a></li>21 <li><a href="#">2</a></li>22 <li><a href="#">3</a></li>23 </ul>24 </td></tr>25 </tbody>26 </table>27 </div>28 </body>29 </html>
The rendering is as follows:
☆Horizontal centering setting - variable width block element method (2)
The second method: change the display of the block-level element to inline type, and then use text-align:center to achieve centering Effect. The following example:
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{text-align:center;} 8 .container ul{list-style:none;margin:0;padding:0;display:inline;} 9 .container li{margin-right:8px;display:inline;}10 </style>11 </head>12 13 <body>14 <div class="container">15 <ul>16 <li><a href="#">1</a></li>17 <li><a href="#">2</a></li>18 <li><a href="#">3</a></li>19 </ul>20 </div>21 </body>22 </html> The advantage of this method compared to the first method is that there is no need to add unsemantic tags, which simplifies the nesting depth of tags. But there are also some problems: it changes the display type of the block element to inline, turning it into an inline element, so it loses some functions, such as setting the length value. (The effect picture is as shown in the method one)
☆Horizontal centering setting - variable width block element method (3)
Method three: By setting float to the parent element, Then set position:relative and left:50% for the parent element, and set position:relative and left:-50% for the child element to achieve horizontal centering.
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{ 8 float:left; 9 position:relative;10 left:50%11 }12 .container ul{13 list-style:none;14 margin:0;15 padding:0;16 17 position:relative;18 left:-50%;19 }20 .container li{float:left;display:inline;margin-right:8px;}21 </style>22 </head>23 24 <body>25 <div class="container">26 <ul>27 <li><a href="#">1</a></li>28 <li><a href="#">2</a></li>29 <li><a href="#">3</a></li>30 </ul>31 </div>32 </body>33 </html> This method can retain block elements and still display them in the form of display:block. The advantage is that no silent discussion tags are added and no nesting is added. Depth, but its disadvantage is that position:relative is set, which brings certain side effects. These three methods are widely used and each has its own advantages and disadvantages. Which method to choose depends on the specific situation. (The effect picture is as shown in the method one)
Vertical centering setting
☆Vertical centering - a single line of text with a determined height of the parent element
The method of vertically centering a single line of text whose height is determined by the parent element is achieved by setting the height and line-height of the parent element to be consistent. The following code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 .wrap h2{ 8 margin:0; 9 height:100px;10 line-height:100px;11 background:#ccc;12 }13 </style>14 </head>15 <body>16 <div class="wrap">17 <h2>hello,world!</h2>18 </div>19 </body>20 </html>
Rendering:
☆Vertical Centering - Multi-line text with a certain height of the parent element (Method 1)
There are two ways to vertically center multi-line text, pictures, and block elements with a certain height of the parent element:
Method 1: Use insert table (including tbody, tr, td) tags, and set vertical-align: middle.
Speaking of vertical centering, there is an attribute vertical-align in CSS for vertical centering, but this style will only take effect when the parent element is td or th. So we have to insert the table tag again. Let’s take a look at an example:
html code:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .wrap{height:300px;background:#ccc} 8 </style> 9 </head>10 <body>11 <table><tbody><tr><td class="wrap">12 <div>13 <p>看我是否可以居中。</p>14 <p>看我是否可以居中。</p>15 <p>看我是否可以居中。</p>16 <p>看我是否可以居中。</p>17 <p>看我是否可以居中。</p>18 </div>19 </td></tr></tbody></table>20 </body>21 </html>
注：因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
效果图如下：
☆垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .container{ 8 height:300px; 9 background:#ccc;10 display:table-cell;/*IE8以上及Chrome、Firefox*/11 vertical-align:middle;/*IE8以上及Chrome、Firefox*/12 }13 </style>14 </head>15 16 <body>17 <div class="container">18 <div>19 <p>看我是否可以居中。</p>20 <p>看我是否可以居中。</p>21 <p>看我是否可以居中。</p>22 <p>看我是否可以居中。</p>23 <p>看我是否可以居中。</p>24 </div>25 </div>26 </body>27 </html> 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。（效果图如方法一图）
隐形改变display类型
☆隐形改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 两句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然也可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>隐性改变display类型</title> 6 <style> 7 .container a{ 8 position:absolute; 9 width:200px;10 background:#ccc;11 12 }13 </style>14 </head>15 <body>16 <div class="container">17 <a href="#" title="">查看效果</a>18 </div>19 </body>20 </html>
效果图如下：