Question

css如何使div里面的文字垂直对齐

页面里有五段文字/图片，我想使每个部分的文字，像旁边的图片一样，距离上边界和下边界的距离相等（如FAQs，距离上边的距离远远大于距离下边界的距离），要怎么做？

Answer 1

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：p {border: 1px solid #0b93d5; height: 30px; padding: 10px;}。

3、浏览器运行index.html页面，此时每个部分的文字距离上边界和下边界的距离是相等的。

Answer 2

你直接把图片设置为div的背景图片，然后再设置padding-top和padding-bottom就可以达到效果了

追问

我要的是文字垂直对齐，距离上边界=距离下边界

追答

文字垂直对齐只要设置文字行高line-height等于div设置的高度就行了
假设你这张图片的高度是10px那么示例如下
例如

追问

"文字垂直对齐只要设置文字行高line-height等于div设置的高度就行了"
这个只针对单行，我的是多行

追答

你可以考虑用table布局，td默认是垂直居中的，如果不想用table的话，那就给你一个最完美的css方式好了，一般我不怎么用，因为比起直接套table来说代码量大了很多

无标题文档

body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}

现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}

Answer 3

设置容器的高度。然后在设置内容的高度和容器的高度一样就可以使上边距和下边距一样了，要是不想一样 可以具体设置padding的值 或者用margin也可以

Answer 4

　　css中的vertical-align 属性设置元素的垂直对齐方式，可能的值：
　　baseline 默认。元素放置在父元素的基线上。
　　sub 垂直对齐文本的下标。
　　super 垂直对齐文本的上标
　　top 把元素的顶端与行中最高元素的顶端对齐
　　text-top 把元素的顶端与父元素字体的顶端对齐
　　middle 把此元素放置在父元素的中部。
　　bottom 把元素的顶端与行中最低的元素的顶端对齐。
　　text-bottom 把元素的底端与父元素字体的底端对齐。
　　% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
　　inherit 规定应该从父元素继承 vertical-align 属性的值。

　　如下代码即可实现垂直对其：
　　.img{vertical-align:bottom}

　　.input{vertical-align:bottom}

　　<p>
　　<img class="img" border="0" src="/i/eg_cute.gif" />
　　<input class="input" />
　　</p>

Answer 5

<div id="div1" style="width:100px; height:40px; line-height:40px; font-size:12px; text-align:center; background:#CC3;">test</div>
是这个效果么？line-height的高度等于DIV高度就可以垂直居中了