您的位置：首页 > Web前端 > CSS

Web前端开发基础 第四课（CSS小技巧1）

2015-07-21 22:18 976 查看

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：

<div class="container">
hi,imooc!
</div>

css代码：

<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>

.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>

<body>

<!--下面是代码任务部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
height:300px;
background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>

<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>


View Code

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute

float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>

css代码

<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>

想不起 display:inline-block 是做什么的小伙伴们，单击“元素分类--内联块状元素”可返回到前面小节进行复习。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>隐性改变display类型</title>
<style>
.container a{
/*position:absolute;*/
float :left;
width:200px;
background:#ccc;

}

</style>
</head>

<body>
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航