大小不固定，多行文字的垂直居

最新推荐文章于 2024-08-04 20:38:28 发布

逝水流痕

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量361

点赞数

分类专栏： HTML与CSS 前端入门文章标签： css 垂直居中

本文链接：https://blog.csdn.net/zxx2011082427/article/details/71213826

版权

前端入门同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML与CSS

2 篇文章 0 订阅

订阅专栏

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

设置父元素的height和line-height高度一致

注：

height是指该元素的高度，line-height是指行间距。

line-height与font-size的计算值之差，在CSS成为行间距，分为两半，分别加到一个文本行内容的顶部和底部。

弊端：

当文字长度大于块的宽度时，就有内容脱离了块。

（自己想的）另外：

对于单行文本，要想设置合理的行间距和元素高度，需满足（（line-height ）-（font-size ））/2<=height-font-size

代码：

<!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>

（2）、垂直居中-父元素高度确定的多行文本（方法一）

使用table（包括tbody,tr,td标签），同时设置vertical-align:middle

注：

td标签默认情况下就设置了vertical-align:middle属性，所以不需要显式的设置了。

CSS中有一个垂直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

代码：

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

  }
</style>
</head>

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

<!--下面是代码任务区-->
<table>
    <tbody>
    <tr><td class="wrap1">
<div>
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

（3）、垂直居中-父元素高度确定的多行文本（方法二）

设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性。

注：

在chrome、firefox、IE8以上的浏览器可以用这种方法，但IE6\7不支持。兼容性差。

好处：

不用添加多余的无意义的标签

缺点：

兼容性不是很好；

而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

代码：

<!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*/
}
.container1{
    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  class="container1">
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>

逝水流痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大小不固定，多行文字的垂直居

（1）、垂直居中-父元素高度确定的单行文本设置父元素的height和line-height高度一致注：height是指该元素的高度，line-height是指行间距。line-height与font-size的计算值之差，在CSS成为行间距，分为两半，分别加到一个文本行内容的顶部和底部。弊端：当文字长度大于块的宽度时，就有内容脱离了块。（自己想的）另外：对于
复制链接

扫一扫

专栏目录