CSS文字垂直居中

html-css023

CSS文字垂直居中,第1张

01

先写上html代码,如图,内容很简单,就是一个div里有一段文本。

02

再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。

03

如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。

04

要让文本水平居中,我们可以添加样式:text-align: center

要让文本垂直居中,我们可以添加样式: vertical-align: middle和display: table-cell

05

添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。

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>