汇总图片、文本的垂直居中-纯css实现

2023-05-30 11:41•css•阅读 3932

涉及到图片和文本，需要分如下几个部分：

1. 单行文本

2. 多行文本

3. 单张图片

4. 文本和图片混排（这种情况少见，应该单独处理）

经搜集，方法如下：

1. 表格实现

1. 简单设置height 和 line-height （仅单行文本可用）

2. table-cell 和position的配合（单行文本、单张图片、多行文本可行）

3. table-cell和writing-mode配合（单张图片可用）

4. table-cell和多余标签inline-block配合（单行文本、单张图片可行）

-------------------------------

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>垂直居中测试</title>

.wrapper{text-align:left; padding-bottom:50px; margin:0 auto; width:980px; min-height:600px; height:auto !important; _height:600px;}

.title{height:30px; line-height:30px; text-align:center; font-size:14px; font-weight:bold;}

.container{padding: 10px; clear:both;}

.container .inner1{height:150px; padding: 0 20px; line-height: 150px; text-align: center; border: solid 1px #ccf; vertical-align: middle; float:left; display: inline; margin-left:20px;}

.container .inner2{height:150px; padding: 0 20px; vertical-align: middle; display: table-cell; border: solid 1px #ccf;}

.container .inner3{display:table; float:left; padding: 0 20px; text-align: center; width:300px; height:150px; position:relative; border: solid 1px #ccf;}

.container .inner3 .inner{*position:absolute; width:100%; left:0; vertical-align: middle; display: table-cell; top:50%;}

.container .inner3 .inner div{position:relative; top:-50%;}

.container .inner4{width:400px; height:300px; display: table-cell; text-align: center; vertical-align: middle; border: solid 1px #aaa; background: #eee;}

.container .inner4 i{display: inline-block; height:100%; vertical-align: middle;}

.container .inner4 img{vertical-align:middle}

.inner5{height:400px; line-height:20px; display: table-cell; width:400px; vertical-align: middle; border: solid 1px #aaa; background: #eee; padding: 10px; text-align: center;}

.inner5 span{*writing-mode:tb-rl; *height:100%;}

.inner5 span img{vertical-align: middle}

</style>

<!--[if IE]>

.container .inner4 i{display: inline-block; height:100%; vertical-align: middle; width:10px; background: #f00;}

.container .inner4 img{vertical-align:middle}

</style>

<![endif]-->

</head>

<body>

<h2 class="title">垂直居中测试</h2>

<div class="inner1">又是一段文本 <img src='/img/2.jpg'/></div>

</div>

<div class="inner2">又是一段文本 <img src='/img/2.jpg'/></div>

</div>

<div class="inner3"><div class="inner"><div>第一行文本<br/>第二行文本<br/>第三行文本<br/>第一行文本<br/>第二行文本</div></div></div>

<div class="inner3"><div class="inner"><div>又是一段文本   <img src='/img/2.jpg'/></div></div></div>

</div>

</div>

</div>

</center>

</body>

</html>

-----------------------------------

参考：http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html

汇总图片、文本的垂直居中-纯css实现

相关推荐

CSS小技巧

css样式设置高度不定文本垂直居中

css中元素水平垂直居中4种方法介绍

css 水平居中垂直居中的几种方法？

CSS设置图片垂直居中的方法

CSS3 Flex布局和Grid布局

垂直水平居中css

img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。