1、选中要对齐的DIV。
2、点击右侧CSS选项卡下的添加属性，如下图
3、在新添加属性名称下选择：line-height，
4、中间的数值框内填上数字，这个数值必须要和这个DIV的height属性值一样，才能使文字纵向居中，
5、第三个框中选择px。确认
6、或者直接在代码视图下的div中的style样式中添加line-height:100px，使这个DIV的行距line-height值与高度height值相等就可以实现垂直居中。
这里给你解释一下 <p>也算是一个容器，什么叫容器，比如罐子，碗，等，可以在里面放东西的都属于容器 而<img>不是容器，只是显示反映图片 <p style="text-align:left" 为什么写在<p>里面，举例说明，一个纸盒子，我里面放个球，那么我想把球放到中间，那么你说，我的操作是对于哪个而言呢？ 这个中间，肯定是对应于纸盒子，而非球 所以，这里的style 是写在p里面 而不是 img 至于style="vertical-align我也不大清楚，你可以去百度查一下这个属性的意思。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>
