Question

css如何使div里面的多行文字垂直居中

在一个div里面包含有多行文字，我想使每个div里面的文字内容（内容是可变的，可能6行，可能10行)，都能像图片一样，垂直居中

Answer 1

　　1、如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；
　　用下面的代码即可实现：
　　代码如下：

　　2、如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div；
　　代码如下：
　　<table>
　　<tr>
　　<td style="vertical-align:middle;height:300px;background-color:red"></td>
　　</tr>
　　</table>

　　3、多行文字居中还有另外一种方法：
　　多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：
　　.middle-demo-2
　　{
　　padding-top: 24px;
　　padding-bottom: 24px;
　　}

Answer 2

在大的div里设置一个没有边框的div位置边距调整好，文字写在没有边框的div里就保证居中了~

追问

上图有五段文字，我想要的是每段文字距离上边界和下边界的距离都相等

追答

文字文字文字

line-height里可以是百分号，也可以是PX值，看你自己喜好了，文字里的P加上上述 line-height代码就可以固定行距了

追问

这只能对单行文字有效

追答

那就给那个没有边框的DIV 设置个padding

追问

没用，还是靠上面对齐

.module .module-txt-right {
float: right;
width: 50%;
padding: 15px;
}

Answer 3

一定要用div来实现吗？现在多行文本垂直居中的解决放法都多多少少有些缺陷，其实最简单的做法就是用table来做，表格内部元素的垂直定位是非常容易实现的，在代码上也会简单很多，用一个复杂的方法去实现一个简单的效果没有意义的。

刚才看了一下你给的参考网站，它也不是垂直居中的，只是设定了一个padding-top，看起来像是居中罢了。

Answer 4

外边一个大div,包裹里边两个小div，一个放图片，一个放文字。设置好浮动控制好两个小div距离就ok了
文字div如下
<div style="width:px;text-align:left;min-height:200px;"></div>
text-align:left文字左对齐 min-height:最小高度 内容多时会自动延伸

追问

上图有五段文字，我想要的是每段文字距离上边界和下边界的距离都相等

追答

给文字div设置好上下padding值就行了

追问

已经设置了同样的padding:15px,

追答

min-height加了吗 min-height值设小点 撑开的同时保证你的padding值有效

追问

加了，没用，div还是居上对齐
.module .module-txt-right {
float: right;
width: 50%;
padding: 15px;
min-height:30px;

}

追答

在你div中加一个p或者div标签padding值针对这个p,p放文字

追问

谢谢，但是不行，我的页面在这里，你可以看一下：

追答

<div style="border:1px solid #ccc; width:500px;min-height:160px;padding:20px">

    <div style="width:300px;min-height:160px;background-color:#006699;"></div>

</div>

 

这是你要的呢种效果吧。关键是高度得算好；比方说外边呢个是200px,上下padding:共40，里边这个就最小160px,就行了。其实可以看出我里边呢个div已经不止160px了但是随着我内容增多它自动延伸了。能明白我意思吗。你把我代码粘去看一下效果就好了

追问

谢谢，但我最外面的div的高度必须是固定的，即。

追答

外边改成固定高度吧，里边还是呢样写就行

追问

我试了，还是不行，你可以在我给你网址里用firebug 试试，

.module {

    border-bottom: 1px solid #E3E3E3;

    overflow: hidden;

    padding: 29px 55px 29px 55px;

    height: 385px; 

}

Answer 5

hight 设置为 auto

追问

默认的是上对齐

追答

不支持整段话居中对齐的， 如果只是单行的， 用行高来控制