CSS style settings-CSS Tutorial-php.cn

CSS style settings

高洛峰

Release： 2016-10-29 11:25:16

Original

2038 people have browsed it

1. Horizontal centering setting

Inline element centering setting: 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 code example is as follows:

HTML代码
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
  .txtCenter{
    text-align:center;
  }
</style>

Copy after login

Centering setting of fixed-width block elements: Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto". The code example is as follows:

HTML代码
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

Copy after login

Center setting of variable-width block elements:

Adding the table tag takes advantage of the length adaptability of the table tag---that is, it does not define its length and does not default to the length of the parent element body ( The length of the table is determined by the length of the text within it), so it can be regarded as a fixed-width block element, and then the fixed-width block-centered margin method is used to center it horizontally. The code example is as follows:

HTML代码
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
CSS代码
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

Copy after login

2. Set the display: inline method: change the display of the block-level element to the inline type (set to display inline elements), and then use text-align:center to achieve the centering effect. The code is as follows:

HTML代码
<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代码
<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>

Copy after login

3. Set position:relative and left:50%: Set float for 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. The code is as follows:

HTML代码
<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代码
<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>

Copy after login

2. Vertical centering setting

A single line of text whose height is determined by the parent element:

The method of vertically centering a single line of text whose height is determined by the parent element is to set the height and line-height of the parent element to be consistent. realized. (height: the height of the element, line-height: as the name implies, line height (line spacing) refers to the distance between the baselines between lines in text). The code is as follows:

HTML代码
<div class="container">
    hello, world!
</div>
CSS代码
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

Copy after login

Multi-line text with a certain height of the parent element:

1. Use the insert table (including tbody, tr, td) tag, and set vertical-align: middle. There is an attribute in CSS for vertical centering called vertical-align. When the parent element sets this style, it will be useful for all inline-block type child elements. The code is as follows:

HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/

Copy after login

2. In browsers such as chrome, firefox and IE8 or above, you can set the display of block-level elements to table-cell (set to table cell display) and activate the vertical-align attribute, but please note that IE6 and 7 This style is not supported and has poor compatibility. The code is as follows:

HTML代码
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
CSS代码
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

Copy after login

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, and it is not compatible with IE6 and 7. Moreover, the display block is modified into a table in this way. -cell, destroys the nature of the original block elements.

3. Implicitly change the display type

When setting one of the following 2 sentences for an element (regardless of the previous type of element, except display:none):

1. position : absolute

2. float : left or float:right

, the display display type of the element will automatically change to display:inline-block (block element). Of course, you can set the width and height of the element, and the default width does not occupy the parent element. The code is as follows:

HTML代码
<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

Copy after login