900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css设置div内文字垂直 DIV+CSS如何让文字垂直居中?

css设置div内文字垂直 DIV+CSS如何让文字垂直居中?

时间:2021-09-18 09:23:23

相关推荐

css设置div内文字垂直 DIV+CSS如何让文字垂直居中?

满意答案

dinahcat

.05.08

采纳率:48%等级:5

已帮助:205人

div+css实现文字垂直居中的五种方法:

1、把文字放到table中,用vertical-align property 属性来实现居中。

Content goes here

2、使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

#content {

position: absolute;

top: 50%;

height: 240px;

margin-top: -120px; /* negative half of the height */

}

Content goes here

3、在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮动,并显示在中间。

Content here

#floater {

float: left;

height: 50%;

margin-bottom: -120px;

}

#content {

clear: both;

height: 240px;

position: relative;

}

4、使用 position:absolute,有固定宽度和高度的 div。这个 div被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中即可

Content here

#content {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

height: 240px;

width: 70%;

}

5、将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

Content here

#content {

height: 100px;

line-height: 100px;

}

00分享举报

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。