css - Div table-cell vertical align not working - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox.
Below is the CSS that I am using and that is all that is in the html page.
@charset "utf-8";
/* CSS Document */
html, body
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-
margin: 0;
padding: 0;
padding-top: 5
background-color:#FFFFFF;
border-collapse:
margin-left:
margin-right:
div.MainHeader
color:#C00000;
font-size:18
font-weight:
text-align:
div.BlackBox
background-color:#000000;
color:#FFFF00;
display:table-
font-size:18
font-weight:
height:191
text-align:
vertical-align:
div.BlackBoxPicture
background-color:#000000;
height:191
margin-top:
margin-bottom:
text-align:
vertical-align:
What am I doing wrong?
1,671124988
I think table-cell needs to have a parent display:table element.
103k40280370
This is how I do it:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
#content {
display: table-
text-align:
vertical-align: middle
&div id="content"&
Content goes here
You can vertically align a floated element in a way which works on IE 6+. It doesn't need
full table markup either. This method isn't perfectly clean - includes wrappers and there are
a few things to be aware of e.g. if you have too much text outspilling the container - but it's pretty good.
Short answer: You just need to apply display: table-cell to an element inside the floated element (table cells don't float), and use a fallback with position: absolute and top for old IE.
Long answer: Here's a . The important stuff summarized (with a conditional comment adding an .old-ie class):
height: 100 /* any fixed amount */
.content {
display: table-
vertical-align:
.old-ie .wrap{
.old-ie .wrap2 {
.old-ie .content {
top: -50%;
with this method. Note how:
In standards browsers, content that exceeds the height of the wrapper element stops centering and starts going down the page. This isn't a big problem (probably looks better than creeping up the page), and can be avoided by avoiding content that is too big (note that unless I've overlooked something, overflow methods like overflow: don't seem to work)
In old IE, the content element doesn't stretch to fill the available space - the height is the height of the content, not of the container.
Those are pretty minor limitations, but worth being aware of.
7,19234462
Because you still using float...
try to remove "float" and wrap it with display:table
&div style="display:table"&
&div style="display:table-vertical-align:text-align:center"&
Hai i'm center here Lol
see this bin:
should set parent element to
display:table-
vertical-align:
text-align:
Sometime floats brake the vertical align, is better to avoid them.
Set the height for the parent element.
Float it with another wrapper without using display:, it works:
&div style="float:"&
&div style="display: table- vertical-align: width: 50%; height: 50%;"&I am vertically aligned on your right! ^^&/div&
An element styled as follows will be aligned vertically to middle:
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
However, the parent element must have a fixed height.
See this fiddle:
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledCSS属性探秘系列(四)：vertical-align
作者：佚名
字体：[ ] 来源：互联网 时间：10-22 09:28:34
本文向大家介绍一下CSS vertical-align 属性的用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
一、前言vertical-align对于初学者最常见的使用是在表格中了，尤其是使用dreamweaver的童学，常见的数top,middle,bottom了,其他的应该很少用到，但是vertical-align的属性之多，所以情况也略显复杂，下面先来看看百度及Google常见问题：1.vertical-align的含义是什么？2.vertical-align图片和文字对齐兼容性问题？3.vertical-align属性值各浏览器兼容性？4.vertical-align如何实现图片的垂直居中？5.vertical-aling如何实现input[type='checkbox'],input[type='radio']与文本对齐？6.为什么我设置的vertical-align属性不起作用？7.line-height对vertical-align属性的影响？&&
二、vertical-align属性介绍1.适用范围：vertical-align指定了内联（inline/inline-block）元素或表格单元格（table-cell）元素的垂直对齐方式。
2.可取值：
value&行内元素(inline)&表格单元格中元素(table-cell)baseline&元素基线与父元素的基线对齐。一些可替换元素，比如 textarea ， HTML标准没有说明它的基线，使用此标签是，各浏览器表现可能有差异&与同行单元格的基线对齐sub&元素基线与父元素的下标基线对齐super&元素基线与父元素的上标基线对齐text-top&元素顶端与父元素字体的顶线对齐text-bottom&元素底端与父元素字体的底线对齐length&元素基线超过父元素的基线指定高度。可以取负值percentage&同length,百分比相对于line-heightmiddle&元素中线与父元素的小写字母的中线对齐&单元格垂直居中top&元素及其后代的顶端与整行的顶端对齐(相对于整行)即元素的行内框的顶端与行框的顶端对齐&单元格的内边距的上边缘与行的顶端对齐bottom&元素及其后代的底端与整行的底端对齐(相对于整行)即元素的行内框的底端与行框的底端对齐&单元格的内边距的下边缘与行的底端对齐3.根据上面的描述我们先来了解几个基本概念：
1)基线，顶线，中线，底线
:1-&顶线:2-&基线:3-&底线:4-&中线2)行高相邻文本行基线间的距离
3)行距上一个文本行基线和下一文本行顶线之间的距离
4)行内框行内框是浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。
5)行框(line box)行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。
6)内容区内容区是指底线和顶线包裹的区域(行内元素display：inline可以通过background-color属性显示出来)，实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
4.属性各浏览器测试
1)对于行内元素vertical-align属性值的表现与父元素(div.parent)相关,与兄弟元素的表现无关
2)对于单元格元素对于表格单元格元素默认值如下：td:左对齐+垂直居中th:水平居中+垂直居中垂直居中继承：td/th继承自tr继承自tbody/thead
三、常见应用：待整理&
四、参考资料
大家感兴趣的内容
12345678910
最近更新的内容CSS&vertical-align属性的用法
vertical-align的定义
W3C上对vertical-align的定义：vertical-align
属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
文本通常根据不可见的基线进行对齐的，而字母的底部位于基线之上。vertical-align属性可以在文字的基线之上或之下提升或降低字母或图像。vertical-align属性的值有baseline、sub、super、top、text-top、middle、bottom、text-bottom、、等，其中初始值为baseline。
baseline(基线)——将子元素的基线与父元素的基线相对齐。对于没有基线的元素，如图像或对象，则使它的底部与父元素的基线对齐。
sub(下面)——把元素置于下方(下标)，确切地说是使元素的基线对齐它的父元素首选的下标位置。
super(上面)——把元素置于上方(上标)，确切地说是使元素的基线对齐它的父元素首选的上标位置。
text-top(文本顶部)——使元素的顶部与其父元素最高字母的顶部相对齐。
top(顶部)——使元素的顶部与行中最高事物的顶部相对齐。
middle(中间)——使元素垂直居中。
bottom(底部)——使元素的底部与行中最低事物的底部相对齐。
text-bottom(文本底部)——使元素的底部与其父元素字体的底部相对齐。
vertical-align的解读
W3C上对vertical-align的定义,大体上可以分为两个部分：
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
<img ALT="" src="/blog7style/images/common/sg_trans.gif" real_src ="http://www.111cn.net/get_pic//49418.png" NAME="image_operate_81688"
TITLE="CSS&vertical-align属性的用法" />
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
<img ALT="" src="/blog7style/images/common/sg_trans.gif" real_src ="http://www.111cn.net/get_pic//55132.png" NAME="image_operate_58687"
TITLE="CSS&vertical-align属性的用法" />
比如，img和span一起出现，要想文字对齐图片的中间位置，就需要为图片添加img{vertical-align:}
再比如input和span连用时，谷歌火狐IE8以上版本里默认的是span在input的中间位置，但ie6/ie7里，span底部和input底部对齐，实现统一的办法就是给input添加input{vertical-align:}，要想它们垂直方向上的中线对齐，就同时也为span设置span{vertical-align:}
vertical-align的使用
1.用于内联元素
下面以图像的垂直对齐为例子说明一下vertical-align属性的用法。
img{ vertical-align:}
src="/ui7/job/hire/pic4.png"
/&看看我的位置&/div&
2.用于表格
vertical-align属性可以直接用于表格单元格，效果相当于HTML中的valign属性。
td{ height:40 vertical-align:}
&table&&tr&&td&这是一个测试&/td&&td&这是一个测试&/td&&/tr&&tr&&td&这是一个测试&/td&&td&这是一个测试&/td&&/tr&&/table&
3.用于块元素
vertical-align属性是不适用于块元素的，这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。
div{width:500 height:200 border:1 display:
table- vertical-align:}
src="/ui7/job/hire/pic4.png"
需要注意的是，上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法，而Chrome、火狐却能支持。
为了兼容ie6/7可以为div添加以下属性
*font-size:175/*高度为200px，
&则200*0.873约为175px*
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。13:37 by wlstyle, ... 阅读,
译文原文：作者：gavin kistner译文：&&&&& 在很多聊天室中我帮助解决的疑难问题是：我要如何在一块区域中居中显示我要显示的内容？这个问题紧接着的陈述就是：我使用vertical-align:middle 但是它好像不起作用！"&&&&& 这个涉及到三方面的问题：&&&&& A:传统的html布局不是旨在解决垂直方向上的行为.本质上,html布局在水平方向上缩放，内容基于当前的宽度得到适当的高度。传统上，水平尺寸控制和布局是比较容易的；垂直方向上的尺寸控制和布局比水平方向难。 &&&& B:vertical-align:middle没有起像期望中的那样起效是因为使用的人没有理解应当如何使用这个属性。&&&& c:在我看来因为css规范把这个属性搞复杂了，vertical-align属性被用来在不同的场景中规范两种不同的行为。table-cell的元素中的vertical-align &&&&&& 当在table的单元格中使用的时候，vertical-align实现和效果和我们所期望的一致,vertical-align模拟了valign属性的效果,在一个现代，标准化的浏览器中，以下的三段代码起到的作用相同:&&&&& &td valign="middle"&&!--but you shouldn't ever use valign--&&/td&&&&&& &td style="vertical-align:middle"&......&/td&&&&&& &div style="display:table- vertical-align:middle"&......&/div&&&&&& 在你的浏览器中用合适的容器包含上面的元素会如下显示：内联元素中的vertical-align&&&&&&& 当vertial-align使用在内联元素中,这完全是另一种情形。在这种情况下，它表现的和align属性作用在img元素上的效果一致.在现在标准的浏览器中，下面的代码效果一样：&&&&&& &img align="center"/&&&&&&& &img style="vertical-align:middle"&&&&&& &span style="display:inline-vertical-align:middle"& foo&br/&&&&&&& 在你的浏览器中，显示效果如下：其他元素中的 vertical-align&&&&&& 理论上说，这个css属性对其他的元素不起作用.当初学者为一个一般的块级元素添加这个属性的时候比如一个div,大多数浏览器使这个元素的所有内联元素继承这个属性。如何居中显示元素&&& 如果你阅读这些内容，你可能对你为啥出错不感兴趣。你可能希望如何使之有效。&&& 方法一&& 接下来的例子基于两点假设.如果你符合这两点假设,这个方法就是为你准备的:&&&& 1.你能将内容放置在一个固定高度的块级元素中。&&&& 2.你能对这个元素应用绝对定位.&& 如果你符合上面的假设,解决方式:&&&& 1.设置父容器绝对定位或者相对定位。&&&& 2.为子容器设置一个固定的高度.&&&& 3.为子容器设置绝对定位和top:50%以便将他定位到父容器的中间。&&&& 4.设置margin-top:-yy这个yy值是子容器的一半的高度。&& 这个例子的代码如下：&&&& &style type="text/css"&&&& #myoutercontainer { position:relative }&&& #myinnercontainer { position: top:50%; height:10 margin-top:-5em }&&& &/style&&&& ...&& &div id="myoutercontainer"&&& &div id="myinnercontainer"&&& &p&Hey look! I'm vertically centered!&/p&&&
&p&How sweet is this?!&/p&&& &/div&&& &/div&在你的浏览器中.上面的例子显示效果如下：&& 方法二& 这个方法需要满足下面的条件：&&& 1.你只有单独一行需要居中显示。&&& 2.你能为父元素设置一个固定的高度。& 如果你满足以上条件，解决方式如下：&&& 1.设置父元素的line-height为一个任意的固定高度& 这个例子的代码如下：&&& &style type="text/css"&&&& #myoutercontainer2 { line-height:4em }&&& &/style&&&& ...&&& &p id="myoutercontainer2"&&&& Hey, this is vertically centered. Yay!&&& &/p&&& 在你的浏览器中，上面的例子显示效果如下：投诉建议、广告投放、友情链接，联系QQ：
css利用vertical-align:middle设置图片在div居中
Loading...
119 次阅读
以前我们都是用表格来解决这个问题，今天发现一个可以利用css中的两个属性就能搞定了一个是vertical-align:middle 另一个是display:table-cell有需要的朋友参考一下。
在div 上设置上下面两个属性就可以 了
vertical-align:
display:table-
&div style=&vertical-align: display:table- height:200 width:160&&
&img src=&aaa.jpg& /&
IT技术书籍推荐:
算法导论(原书第3版)
Thomas H.Cormen (作者), Charles E.Leiserson (作者), Ronald L.Rivest (作者), Clifford Stein (作者), 殷建平 (译者), 徐云 (译者), 王刚 (译者), 等 (译者)
《算法导论(原书第3版)》内容简介：在有关算法的书中，有一些叙述非常严谨，但不够全面；另一些涉及了大量的题材，但又缺乏严谨性。《算法导论(原书第3版)》将严谨性和全面性融为一体，深入讨论各类算法，并着力使这些算法的设计和分析能为各个层次的读者接受。全书各章自成体系，可以作为独立的学习单元；算法以英语和伪代码的形式描述，具备初步程序设计经验的人就能看懂；说明和解释力求浅显易懂，不失深度和数学严谨性。全书选材经典、内容丰富、结构合理、逻辑清晰，对本科生的数据结构课程和研究生的算法课程都是非常实用的教材，在IT专业人员的职业生涯中，《算法导论(原书第3版)》也是一本案头必备的参考书或工程实践手册。
相关推荐:1、2、3、4、5、6、7、8、9、10、
随机关键词:
正在加载...
最新微信头条