在DIV里怎么用CSS控制该DIV内一行字的纵向对齐方式?

html-css014

在DIV里怎么用CSS控制该DIV内一行字的纵向对齐方式?,第1张

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>