@(学习)[前端技术]
虽然是基础课程,但还是想学习一遍。
隐性修改display属性将元素设置为绝对定位或者浮动,元素的display属性会变成inline-block
position:absolute
float:left
或float:right
简单说就是,在页面中有元素设置了上面的两种属性,那么元素就会变成inline-block
,这样行内元素就可以设置width
和height
了。如下代码
<div class="container">
<a href="#" title="">点击这里</a>
</div>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
如果a标签没有设置浮动或者绝对定位,设置width是无效的。但是如果指定了,就可以设置width
和height
了。
父元素高度固定的单行文本
将line-height
和height
设置为相同的值。这种设置方式的弊端:如果文字长度超过了元素的宽度,文本会溢出。
<div class="container">
helo,world!
</div>
.container{
height:100px;
line-height:100px;
background:#999;
}
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。(PS:这个对行间距最好的解释)
父元素高度固定的多行文本(插入table)
给父元素插入table、tbody、tr、td
。因为td
元素默认存在vertical-align:middle
,所以设置元素会垂直居中。
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
.wrap{height:300px;background:#ccc}
父元素高度固定的多行文本(设置table-cell)
IE8+以上浏览器,可以设置元素display:table-cell
同时设置vertical-align:middle
。
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
元素水平居中
行内元素设置水平居中
如果设置文本、图片等行内元素水平居中,只需要将父元素设置text-align:center
。代码如下:
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
.txtCenter{
text-align:center;
}
定宽块状元素水平居中
当元素满足定宽
和块状
两个条件时,通过设置margin-left:auto;
和margin-right:auto;
来设置水平居中。
<body>
<div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
</body>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
不定宽块状元素的水平居中
不定宽块状元素的水平居有三种方式:
- 加入
table
标签(这种方式一般不使用) - 设置
display: inline
方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置 - 设置
position:relative
和left:50%
:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
将块级元素设置为inline
将块级设置为display:inline
,然后通过设置行内元素居中text-align:center
来达到水平居中。
<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>
.container{
text-align:center; /*父级元素设置文本居中*/
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;/*将块级元素设置为inline*/
}
.container li{
margin-right:8px;
display:inline;
}
通过相对定位
将父元素设置为float:left
并设置position:relative
和left:50%
将元素进行偏移,然后设置子元素为postion:relative
和left:-50%
进行水平居中。
实现的原理也比较简单,首先将父元素相对设置偏移50%
,然后设置子元素相对偏移-50%
。
<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>
/*父元素设置浮动和相对左偏移50%*/
.container{
float:left;
position:relative;
left:50%
}
/*子元素设置相对左偏移-50%*/
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
课程来源: