在div中垂直alignment文本

我正在尝试find最有效的方式来alignment文本与div。 我已经尝试了一些东西,似乎没有工作。

.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } 

在CSS中垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要:

对于CSS2浏览器,可以使用display:table / display:table-cell来将内容居中。

JSFiddle也提供样例 :

  <div style="display: table; height: 400px; overflow: hidden;"> <div style="display: table-cell; vertical-align: middle;"> <div> everything is vertically centered in modern IE8+ and others. </div> </div> </div> 

有可能将老式浏览器(IE6 / 7)的黑客手段合并到使用#样式中,以隐藏较新浏览器的样式:

 <div style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style= " #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> everything is vertically centered </div> </div> </div> 

您需要添加line-height属性,并且该属性必须匹配div的高度。 在你的情况下:

 height: 309px; line-height: 309px; 

事实上,你可能完全删除height属性。

这只适用于一行文本 ,所以要小心。

更新 – 这是一个很好的资源

http://howtocenterincss.com/

以CSS为中心是一个痛苦的屁股。 似乎有一个巨大的方法来做到这一点,取决于各种因素。 这巩固了他们,并给你你需要的每个情况的代码。

更新 – 使用Flexbox

为了保持这篇文章最新的最新技术,这里有一个更容易的方法来集中使用flexbox的东西。 Flexbox在IE9 and lower不受支持。

这里有一些很好的资源:

  • Flexbox指南
  • 用flexbox居中元素
  • Flexbox的IE10语法
  • 支持Flexbox

jsfiddle与浏览器前缀

HTML

 <ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul> 

CSS

 li { display: flex; justify-content:center; align-content:center; flex-direction:column; /* column | row */ } 

更新 – 另一个解决scheme

这是来自zerosixree ,让你用CSS的6行中心任何东西

IE8 and lower不支持此方法

的jsfiddle

HTML

 <ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul> 

CSS

 p { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } 

以前的答案

简单和跨浏览器的方法,作为标记的答案中的链接有用,稍微过时。

如何在无序列表和div中垂直和水平居中文本,而不使用JavaScript或css行高 。 无论你有多less文本,你都不需要将特殊的类应用到特定的列表或div(代码是相同的每个)。 这适用于所有主stream浏览器,包括IE9,IE8,IE7,IE6,Firefox,Chrome,Opera和Safari。 有2个特殊的样式表(1个用于IE7,另一个用于IE6),由于他们现代浏览器没有的css限制,帮助他们。

安迪霍华德 – 如何垂直和水平居中文本在一个无序的列表或div

编辑:因为我没有太在意我最后一个项目的IE7 / 6,我用了一个稍微剥离的版本(即删除的东西,使其工作在IE7和6)。 可能对其他人有用…

的jsfiddle

HTML

 <ul> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> </ul> 

而CSS:

 .outerContainer { display: table; width: 100px; /* width of parent */ height: 100px; /* height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; } 

我使用下面的内容轻松地垂直居中随机元素:

HTML:

 <div style="height: 200px"> <div id="mytext">This is vertically aligned text within a div</div> </div> 

CSS:

 #mytext { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } 

这将我的div的文本集中到200px高的外部div的精确垂直中间。 请注意,您可能需要使用浏览器前缀(如我的例子中的-webkit- )才能使其适用于您的浏览器。

这不仅适用于文本,而且适用于其他元素。

使用display: flex很容易。 所有的文本div都是垂直居中的:

 div { display: flex; align-items: center; } 

如果你想,水平:

 div{ display: flex; align-items: center; justify-content: center; } 

你必须看到你需要的浏览器版本; 在旧版本中,它不起作用。

您可以通过将显示设置为“table-cell”并应用vertical-align:middle;

  { display:table-cell; vertical-align:middle; } 

但是,这并不是所有版本的Internet Explorer都支持的,根据我从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录未经许可&#x3002;

注意: “inline-table”,“table”,“table-caption”,“table-cell”,“table-column”,“table-column-group”,“table-row”,“table-row “组”和“inheritance”不支持IE7和更早版本。 IE8需要!DOCTYPE。 IE9支持这些值。

下表显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值&#x3002; 我希望这有帮助

在这里输入图像描述

这是我最喜欢的解决scheme(支持简单和非常好的浏览器):

 div{ margin:5px; text-align:center; display:inline-block; } .vcenter{ background:#eee; width: 150px; height: 150px; } .vcenter:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */ } .vcenter :first-child { display:inline-block; vertical-align:middle; max-width: 99.999%; } 
 <div class="vcenter"> <p>This is my Text</p> </div> <div class="vcenter"> <p>This is my Text<br />Text</p> </div> <div class="vcenter"> <p>This is my Text<br />Text<br />Text</p> </div> 

这是一个最适合单行文本的解决scheme。

如果行数已知,它也可以用于多行文本

 .testimonialText{ font-size:1em;/*Set a font size*/ } .testimonialText:before {/*add a pseudo element*/ content:""; display:block; height:50%; margin-top:-0.5em;/*half of the font size*/ } 

这是一个JSFiddle

 <!DOCTYPE html> <html> <head> <style> .container{ height:250px; background:#f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -webkit-box-align: center; justify-content: center; } p{ font-size:24px;} </style> </head> <body> <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html> 

查看这个简单的解决

HTML

 <div class="block-title"><h3>I'm a vertically centered element</h3></div> 

CSS

 .block-title { float:left; display:block; width:100%; height:88px } .block-title h3 { display:table-cell; vertical-align:middle; height:inherit } 

的jsfiddle

有一个简单的方法来垂直alignment内容,而不依靠table / table-cell:

http://jsfiddle.net/bBW5w/1/

在其中我添加了一个不可见的(width = 0)div,它假定了容器的整个高度。

它似乎工作在IE和FF(最新版本),没有与其他浏览器检查

  <div class="t"> <div> everything is vertically centered in modern IE8+ and others. </div> <div></div> </div> 

当然CSS:

 .t, .t > div:first-child { border:1px solid green; } .t { height:400px; } .t > div { display:inline-block; vertical-align:middle } .t > div:last-child { height:100%; } 

这是我find的最干净的解决scheme(IE9 +),并通过使用其他答案已省略的transform-style为“off by .5 pixel”问题添加了一个修复程序。

 .parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

资料来源:http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

简单的解决scheme,不知道价值的元素

HTML

 <div class="main"> <div class="center"> whatever </div> </div> 

CSS

 .main { position: relative } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } 

您可以使用弹性盒在一个div内垂直alignment中心文字。

 <div> <p class="testimonialText"> This is the testimonial text. </p> </div> div { display: flex; align-items: center; } 

您可以通过以下链接了解更多信息: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

使用flex请注意浏览器渲染的差异。

这对于Chrome和IE来说都很好:

 .outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; text-align: center; justify-content: center; align-items: center; background-color: #fcc; } 
 <div class="outer"><div class="inner">Active Tasks</div></div> 

根据Adam Tomat的回答,准备了一个jsfiddle 例子来alignmentdiv中的文本

 <div class="cells-block"> text<br/>in the block </div> 

在CSS中使用display:flex

 .cells-block { display: flex; flex-flow: column; align-items: center; /* vertically */ justify-content: flex-end; /* horisontally */ text-align: right; /* addition: for text's lines */ } 

在另一个例子中 ,在博客中很less有解释。

HTML

 <div class="relative"><!--used as a container--> <!-- add content here to to make some height and width example:<img src="" alt=""> --> <div class="absolute"> <div class="table"> <div class="table-cell"> Vertical contents goes here </div> </div> </div> </div> 

CSS

  .relative{ position:relative; } .absolute{ position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); } .table{ display:table; height:100%; width:100%; text-align:center; color:#fff; } .table-cell{ display:table-cell; vertical-align:middle; } 

这是在div中使用calc()在CSS中div另一种变化。

 <div style="height:300px; border:1px solid green;"> Text in outer div. <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)"> Text in inner div. </div> </div> 

这工作,因为:

  • position:absolute div精确位置的position:absolute
  • 我们知道内部div的高度,因为我们将其设置为20px
  • calc(50% - 10px)50% –为内部div中心高度的一半

尝试embedded一个表格元素。

 <div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div> 

嗯,显然有很多方法可以解决这个问题。

但是我有一个绝对定位的<div>height:100% (实际上, top:0;bottom:0和固定宽度),而display:table-cell只是不能使文本垂直居中。 我的解决scheme确实需要一个内部span元素,但是我看到很多其他的解决scheme也是这样做的,所以我不妨添加它:

我的容器是一个.label ,我想要数字垂直居中。 我把它定位在top:50% ,设置line-height:0

 <div class="label"><span>1.</span></div> 

而CSS如下:

 .label { position:absolute; top:0; bottom:0; width:30px; } .label>span { position:absolute; top:50%; line-height:0; } 

看到它的行动: http : //jsfiddle.net/jcward/7gMLx/

在Div的中心显示内容/图像有几个技巧 。 一些答案是非常好的,我也完全同意这些。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizo​​ntal-and-vertical-centering-in-css/

例子有10多种技术 。 现在取决于你的喜好。

毫无疑问, display:table; display:table-Cell display:table; display:table-Cell是一个更好的伎俩。

一些好的技巧如下:

技巧1 – 通过使用display:table; display:table-cell display:table; display:table-cell

HTML

 <div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> CONTENT </div> </div> </div> 

CSS代码

 .Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } 

技巧2 – 通过使用display:inline-block

HTML

 <div class="Center-Container is-Inline"> <div class="Center-Block"> CONTENT </div> </div> 

CSS代码

 .Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ } 

窍门3 – 通过使用position:relative;position:absolute

 <div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;"> <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;"> <h4>ABSOLUTE CENTER,<br> WITHIN CONTAINER.</h4> <p>This box is absolutely centered, horizontally and vertically, within its container</p> </div> </div> 

CSS:

 .vertical { display: table-caption; } 

将此类添加到包含要垂直alignment的元素的元素

如果您需要使用min-height属性,则必须在以下位置添加此CSS:

 .outerContainer .innerContainer { height: 0; min-height: 100px; }