CSS 代码如何在一个div内让文字垂直居中
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平+垂直居中</title>
<style type="text/css">
div {
font-family: "microsoft yahei";
border: 5px solid #cce800;
}
.container {
width: 600px;
padding: 10px;
margin: 10px auto;
background-color: gray;
}
.vertical {
display: table-cell;
height: 400px;
padding: 5px;
text-indent: 2em;
vertical-align: middle;
background-color: #cce8cf;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 外层这个是为了实现水平居中 -->
<div class="container">
<div class="vertical">
测试垂直居中,即便是多行，我也还是垂直居中对齐的。
<h3>问题分析：</h3>
<p>1.CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。</p>
<p>2.Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。</p>
<p>3.扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。</p>
</div>
</div>
</body>
</html>下边是运行出来的效果：
问题分析：
1.
CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。
2.
Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。
3.
扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。
另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。
<html>
<head>
<meta charset="UTF-8">
<title>水平+垂直居中</title>
<style type="text/css">
div {
font-family: "microsoft yahei";
border: 5px solid #cce800;
}
.container {
width: 600px;
padding: 10px;
margin: 10px auto;
background-color: gray;
}
.vertical {
display: table-cell;
height: 400px;
padding: 5px;
text-indent: 2em;
vertical-align: middle;
background-color: #cce8cf;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 外层这个是为了实现水平居中 -->
<div class="container">
<div class="vertical">
测试垂直居中,即便是多行，我也还是垂直居中对齐的。
<h3>问题分析：</h3>
<p>1.CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。</p>
<p>2.Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。</p>
<p>3.扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。</p>
</div>
</div>
</body>
</html>下边是运行出来的效果：
问题分析：
1.
CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。
2.
Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。
3.
扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。
另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
让div的height设置为auto，或者不设置高度(高度默认值为auto)，然后设置div的上下padding值相等。
比如：
div
{
padding:20px;/*或者padding-top:20px;padding-bottom:20px;*/
height:auto;
}
比如：
div
{
padding:20px;/*或者padding-top:20px;padding-bottom:20px;*/
height:auto;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
由于div
是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。
1.
设置文字的padding，使其达到居中的效果。、
2.
在文字外层，div内包裹一个<p>标签，<div><p>只是一段文字</p></div>并将p标签的大小设置的与div标签同样大小。再对p标签应用vertical-align
：middle属性。
具体如下：
3.
p{
width:100%;
height:100%;
vertical-align:middle;}/*注意当p标签的height为百分比写法时，div标签的height不要使用百分比的写法*/
是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。
1.
设置文字的padding，使其达到居中的效果。、
2.
在文字外层，div内包裹一个<p>标签，<div><p>只是一段文字</p></div>并将p标签的大小设置的与div标签同样大小。再对p标签应用vertical-align
：middle属性。
具体如下：
3.
p{
width:100%;
height:100%;
vertical-align:middle;}/*注意当p标签的height为百分比写法时，div标签的height不要使用百分比的写法*/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.div{
/*
文字垂直居中
给包含它的父元素一个高度/宽度
然后padding:50%
0;
*/
/*
文字水平居中
text-align:center;
*/
}
/*
文字垂直居中
给包含它的父元素一个高度/宽度
然后padding:50%
0;
*/
/*
文字水平居中
text-align:center;
*/
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
