怎么设置文字在div中垂直居中,而不是用line-height来设置

发布网友发布时间：2022-04-06 12:34

共3个回答

热心网友时间：2022-04-06 14:03

CSS网页布局DIV水平居中的各种方法

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

imoker.cn（爱摩客）提供的代码片段：

div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

imoker.cn（爱摩客）提供的代码片段：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> 单行文字实现垂直居中 </title>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
< /style>
< /head>
< body>
< div>现在我们要使这段文字垂直居中显示！</div>
< /body>
< /html>
不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码：

imoker.cn（爱摩客）提供的代码片段：

div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

imoker.cn（爱摩客）提供的代码片段：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> 多行文字实现垂直居中 </title>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
< /style>
< /head>
< body>
< div><pre>现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
< /pre></div>
< /body>
< /html>
三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

imoker.cn（爱摩客）提供的代码片段：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> 多行文字实现垂直居中 </title>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
< /style>
< /head>
< body>
< div id="wrap">
< div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
< /pre></div>
< /div>
< /body>
< /html>
这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

imoker.cn（爱摩客）提供的代码片段：

<div id="wrap">
< div id="subwrap">
< div id="content">
< /div>
< /div>
< /div>
如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

imoker.cn（爱摩客）提供的代码片段：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> 多行文字实现垂直居中 </title>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
< /style>
< /head>
< body>
< div id="wrap">
< div id="subwrap">
< div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
< /pre></div>
< /div>
< /div>
< /body>
< /html>
五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此，一个完美的居中方案就产生了。

imoker.cn（爱摩客）提供的代码片段：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title> 多行文字实现垂直居中 </title>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
< /style>
< /head>
< body>
< div id="wrap">
< div id="subwrap">
< div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
< /pre></div>
< /div>
< /div>
< /body>
< /html>
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

热心网友时间：2022-04-06 15:21

如果是一行文字，设置height和line-height相同是最简单的垂直居中方法

如果是一段文字，父元素不限高，要垂直居中，可以采用padding:20px 0;

如果是一段文字，父元素有固定的高，要垂直居中，可以采用

<div style="height:400px;position:relative;">
<div style="position:absolute;top:50%;">

<div style="position:relative;top:-50%;">

asdfsdfasdfsda<br />sadfsdfasdfsdafasdfsd
</div>

</div>

</div>

热心网友时间：2022-04-06 16:56

样式我还没想到合适的，不过你不妨改成table布局，td默认就是垂直方向居中的

怎么设置文字在div中垂直居中,而不是用line-height来设置

一、单行垂直居中如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如: imoker.cn(爱摩客)提供的代码片段: div { height:25px; line-height:25px; overflow:hidden; } 这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出...

在编写HTML时,怎样让DIV文字居中?

1、首先打开Sublime Text软件，新建一个HTML页面，如下图所示 2、然后我们在html页面中加入div标签，并且在div标签中加入一些文字，如下图所示 3、接下来我们给div标签编写CSS样式，如下图所示，这里主要是text-align和line-height两个属性，如下图所示 4、最后我们运行页面程序，你就会在页面中看到div...

如何使文字在div中水平和垂直居中的css代码

可以用“text-align”属性和“line-height”属性。1、新建html文件，在body标签中添加div标签，在div标签输入文字，这里以“演示文本”为例，给div标签设置宽度、高度和背景色属性，属性值分别为200、100和灰色，这时“演示文本”默认位置为div盒子的左上方：2、这时给div标签添加上“text-align”属性，属...

DIV+CSS如何让文字垂直居中?

1、把文字放到table中，用vertical-align property 属性来实现居中。<div id="wrapper"> <div id="cell"> <div class="content">Content goes here</div> </div> </div> 2、使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中...

为什么把line-height设置为容器div的高度就能使文字垂直居中?

这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。这样的话，如果你的DIV是50px，那么巧了，正好这行文字也就相对于DIV居中了。所以，这样一来呢，就有了“把line-height设置为容器div的高度就能使文字垂直居中”。不知道这么说是不是回答了你的问题。

div中如何设置文字居中

1、可以用text-align属性设置。首先打开hbuilder编辑器，新建一个html文件，先切换到边改边看模式：2、写一个div出来，同时在内部加上一些文字，使用css增加属性，使得div的区域看得清楚：3、接下来就使用text-align的center属性将文字横向居中，同时设置行高，使这行文字实际占用的高度和div高度相同，就...

css使div里的内容垂直居中

1、首先我们准备好一个空的html结构的文档。2、接下来我们要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。3、接下来我们就在div中添加内容，如下图所示，运行后你会发现内容偏向于左上角。4、下面我们给div设置水平居中，如下图所示，并且设置行高为div的高度，你会发现它水平...

DIV CSS如何让文字垂直居中?

如果居中元素高度可变，这就需要额外的一个wrapper元素，用table-cell的方式来模拟表格的居中实现具体请参考下列代码：<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style...

怎样让html中的文字垂直水平居中显示

line-height: 200px;”，text-align: center;表示水平居中，line-height: 200px;表示垂直居中，line-height的属性要根据文字所在的标签的高度来设置，比如我的文字是在div里面，div是200px，就设置200px，如果你的div或者其他标签是400px，就设置400px。最后，再来预览效果，文字已经水平垂直居中了。

如何调整文字在div中的位置如何调整文字在div中的位置

如何控制文本在DIV中的位置 1。首先，打开hbuilder软件，创建一个新的html文件。在html中，设置三个P标签，并赋予它们不同的类属性。2.然后，在顶部的style标签中设置P标签的高度、宽度和背景色。在三个类的text-algin属性中，将第一个设置为left表示左对齐，将第二个设置为center表示居中，将第三个...

文字在div中水平垂直居中文字在div垂直居中 css设置文字垂直居中 div内文字垂直居中 html文字垂直居中代码 div居中和div内容居中怎样让div里面的文字居中文字如何垂直居中 css让文字垂直居中