css如何使div里面的文字垂直对齐

html-css021

css如何使div里面的文字垂直对齐,第1张

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>

采用css的flex布局实现最为简单有效。​display: flex

        

<div class="box">

           

 <div class="item">我要居中</div>

      

  </div>

        

.box {

            

display: flex

            

width: 200px

            

height: 200px

            

justify-content: center // 水平居中

            

align-items: center // 垂直居中

       

 }