css解决文字垂直居中

参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html   http://zhidao.baidu.com/question/69214815.html

对于文字的水平居中,text-align:center可以解决,垂直居中情况较复杂,分类讨论:

一、单行垂直居中 

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

div{

height:100px;

line-height:100px;

overflow:hidden;

}

这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中

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

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

div {           padding:25px;           border:1px solid #FF0099;           background-color:#FFCCFF;           width:760px;         }   

三、多行文本固定高度的居中
在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素: 
div#wrap {     height:400px;     display:table;   }   div#content {     vertical-align:middle;     display:table-cell;     border:1px solid #FF0099;     background-color:#FFCCFF;     width:760px;   }
<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>  上面的方法ie8及以下都不支持,下面是完美解决兼容性问题的方法:
四、完美的解决方案 

.outer {
  display:table; width:578px; overflow:hidden;
  background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;} 

<!--下面的CSS是针对IE8,IE7,IE6-->
<!--[if lte IE 8]>
<style>
.outer{position:relative;}
.middle{position: absolute; top: 50%;}
.inner{position: relative; top:-50%}
</style>
<![endif]-->

以上是样式!~

这里我们需要定义三个DIV:
外层(outer) 可以根据需要定义高度、宽度,但是display必须为table。 
中间层(middle) 可以有特定的CSS样式,例如:margin-left,但是display必须为table-cell,vertical-align必须为middle。 
内层(inner) 主要是用来对付IE6和IE7 Ie8的()。 
有了上面的CSS,HTML代码可以这么写:

<div class="outer">
  <div class="middle">
    <div class="inner">
      把你要居中的文本放在这里
      这是第二行
      ...
    </div>
  </div>
</div>

 
 
 
时间: 2024-10-07 05:29:42

css解决文字垂直居中的相关文章

css实现文字垂直居中问题

一.问题描述 当高度固定或者不固定时,单行或者多行文本难以实现垂直居中: 二.产生原因 1.高度不固定,CSS 本身并没有提供相应的 API 支持(确切来说是提供不全): 2.浏览器不支持: 三.解决方法: 1.使用line-height属性,将line-height设置与元素高度等高. 优点:简单明了: 缺点:只适用于单行文本,局限性大 代码: .center-text-trick {height: 100px;line-height: 100px; white-space: nowrap;}

css基础 文字垂直居中 行高等于容器高度

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign 特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而 像<div>.<span>这样的元素是没有valign特性的,因此使用verti

select中文字垂直居中解决办法

我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对select的height.padding.line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0.height.no.padding.100.no.height.no.padding,结果如  链接图片各浏览器DEMO外观 我们可以得

css实现固定高度及未知高度文字垂直居中的完美解决方案

在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字的话使用height(高度)和line-height(行高)来解决,但是假如页面有多行文字的话 固定高度该怎么解决? 或者未知高度我们该用css怎么解决? 且兼容各个游览器! 一:单行文字垂直居中: 如果一个容器中只有一行文字的话,让他垂直居中比较简单 直接定义height(高度)和 line-height(

css 文字垂直居中问题

CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_logo_des"></div>CSS: #header_logo_des{ width: 100%; height: 100%; font-size: 28px; text-align:center; line-height: 100%; /*设置line-height与父级元素的he

解决Firefox下input button内文字垂直居中

众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致): 按钮文字居中是不行的(此时设置padding-bottom是没用的) : 等等… 1 input[type="reset"]::-moz-focus-inner, 2 input[type="button"]::-moz-focus

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

此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<spa

CSS 文字垂直居中

div.wrap { display: table; width: 100%; position: absolute; left: 0; top: 0; height: 100%; text-align: center; font-size: 1.2em; line-height: 1.2em; vertical-align: middle; color: #094D7E; font-weight: bold; _position: absolute; overflow: hidden; } d