与CSS垂直对齐

我试图垂直对齐div标记中的内联元素。这是我的HTML：与CSS垂直对齐

<div class="foo"> 
    <div id="bar"> 
     <a href="#">Link 1</a> 
    </div> 
</div>

，这里是我的CSS：

.foo{ 
    width:200px; 
    height:60px; 
    background-color:red; 
} 

.foo #bar{ 
    text-align:center; 
    vertical-align:middle; 
}

如何垂直对齐这种定位的标签？我是否已经将HTML/CSS设置为正确的方式来有效地执行此操作？垂直对齐嵌入式和块式元素的最佳做法是什么？

感谢

来源

2012-12-11 symlink

用CSS

.Purest方式是使用display属性，像这样：

.foo { display: table; } 
#bar { 
    display: table-cell; 
    vertical-align: middle; 
}

这是假设你的#bar有一定的描述集的高度，其内容应垂直赞同..

来源

2012-12-11 01:01:14 danielsan

以上应该工作。值得注意的是，“垂直对齐”实际上使元素相互对齐。例如，如果您在一行文字设置中有一个图像“vertical-align：middle;”将文本对齐到图像的中间。它不用于块级别居中。你可以在这里阅读更多：http://phrogz.net/css/vertical-align/index.html – Darren

与CSS垂直对齐

回答

相关问题