HTML中如何设置文本垂直靠下对齐

①：设置行高line-height=容器的高度-文字的大小/2，这个时候元素在垂直方向上就会出现在你的容器的中间,比如，1个div的高度是100个像素，文字的大小是20px，那末你设置div的line-height的值为90px便可。同理要是你想文字在底部出现，那末设置为190px。②：设置1下padding-top属性，通过这个属性你就能够控制你的文字和容器顶部的距离。容器的实际高度是padding-top+height，你应当知道。这么理解，本来我的父容器是想设置为100px的，如果我想文字在垂直方向的中间，那末容器的1半就是50px，由于我文字本身的大小是20px的，所以文字的中间距离容器顶部应当是100px/2⑵0px/2=40px，现在容器的高度实际上变成了100px+40px，所以我把高度设置为100px⑷0px，那末容器的高度就保证为100px了。

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">

<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>

</ul>

css代码：

<style type="text/css">

.imgWrap li {

float: left

border: solid 1px #666

margin: 10px 10px 0 0

list-style: none

border-collapse: collapse

}

.imgWrap a {

background: #ffa url(images/gridBg.gif) repeat center

width: 219px

height: 219px

display: table-cell/*图片容器以表格的单元格形式显示*/

text-align: center/* 实现水平居中 */

vertical-align: middle/*实现垂直居中*/

}

.imgWrap a:hover {

background-color: #dfd

}

.imgWrap img {

border: solid 1px #66f

vertical-align: middle/*图片垂直居中*/

}

</style>

实现效果如下：

---