CSS 代码如何在一个div内让文字垂直居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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写前端代码,灰常不错的一款编辑器,骚年,哥能帮你的就这么多了,剩下自己努力吧。
参考技术A 让div的height设置为auto,或者不设置高度(高度默认值为auto),然后设置div的上下padding值相等。
比如:
div

padding:20px;/*或者padding-top:20px;padding-bottom:20px;*/
height:auto;
参考技术B 由于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不要使用百分比的写法*/
参考技术C .div
/*
文字垂直居中
给包含它的父元素一个高度/宽度
然后padding:50%
0;
*/
/*
文字水平居中
text-align:center;
*/

css如何控制文字垂直居底

css如何控制文字垂直居背景图底不能用padding margin之类的

你说的文字居于底部是指浏览器底部么,如果是的话,需要用到CSS属性position,而position: fixed就是相对于浏览器进行定位的,让后用left, right, bottom, top这些坐标值来进行指定位置,底部就是bottom: 0,所以让文字垂直居底就像下面这个例子一样:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #footer
                position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
            
        </style>
    </head>
    <body>
        <div id="footer">垂直居于底部的文字</div>
    </body>
</html>

这个例子里还假设你是除了需要垂直居底以外,还需要居中设置,因此那个width:100%和text-align: center就是为了居中放置的,这种设置经常用在一个网站用于声明版权、网站地图这些,多看几个这样的网站源代码就会发现,它们都是这么做的。


此外,还有一个position: absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置还是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。你可以拿它来做到让某个元素处于一个区域比如某个div背景的底部,这时外面套的那个元素不能用默认的positon设定,需改成position: relative。例如:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container
            position: relative;
            width: 400px;
            height: 300px;
            margin: 20px auto;
            background-color: #de5;
        
        #innerFooter
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        
    </style>
    </head>
    <body>
        <div id="container">
            <div id="innerFooter">始终垂直居于块元素底部的文字</div>
        </div>
    </body>
</html>

参考技术A 在你的文字最外层的样式表里加上 writing-mode:tb-rl;文字就可以竖排了。
有不明白的再问我。
参考技术B 在层内套入表格,然后用表格的valign="bottom" 属性使层的内容垂直居底.就像这样:
<div>
<table>
<tr>
<td valign="bottom" height="100">test</td>
</tr>
</table>
</div>

同理,如果想垂直居中可以这样写valign="middle"
参考技术C vertical-align:bottom; 参考技术D display:inline;
vertical-align:bottom;

以上是关于CSS 代码如何在一个div内让文字垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

css如何控制文字垂直居底

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

如何让div中的行内元素的文字垂直居中

如何设置一个div中的文字水平垂直居中

如何使用css设置文字在网页中显示居中?

怎么使用CSS让图片水平垂直都居中?