属性设置元素的垂直
对齐方式
，可能的值：
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_cutegif"
/>
<input
class="input"
/>
</p>兄弟，我给你写了个示例，把下面代码复制过去看看吧：
DIV中怎样让文字跟居中对齐的键在于这个属性 vertical-align:middle;
------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p {
height:30px;
line-height:30px;
width:100px;
overflow:hidden;
}
这段代码可以达到效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p {
padding:30px;
}<style type="text/css">
{margin:0;padding:0;}
div1{width:300px;height:200px;overflow:hidden;text-align:left;border:1px solid #000;margin:50px;}
div1 table{width:100%;height:100%;}
</style>
<div class="div1">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td>文字水平,垂直居中,可以换行(换行后能左对齐,而不是水平居中就更好 了),div具有固定高度和左浮动,超出div的文字隐藏,只需要在ie9及以上,火狐,谷歌实现就可以了</td>
</tr>
</table>
</div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平+垂直居中</title>
<style type="text/css">
div {
font-family: "microsoft yahei";
border: 5px solid #cce800;
}
container {
width: 600px;
padding: 10px;
margin: 10px auto;
background-color: gray;
}
vertical {
display: table-cell;
height: 400px;
padding: 5px;
text-indent: 2em;
vertical-align: middle;
background-color: #cce8cf;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 外层这个是为了实现水平居中 -->
<div class="container">
<div class="vertical">
测试垂直居中,即便是多行，我也还是垂直居中对齐的。
<h3>问题分析：</h3>
<p>1CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。</p>
<p>2Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。</p>
<p>3扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。</p>
</div>
</div>
</body>
</html>下边是运行出来的效果：
问题分析：
1
CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。
2
Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。
3
扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。
另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）