html – 垂直对齐元素

概述HTML <div class="main"> <h1>Test</h1> <span class="details">Jan 21, 2014</span></div> CSS .main{ background-color: #666666; border: 1px solid red;}h1{ background-color: #383838; HTML

<div >    <h1>Test</h1>    <span >Jan 21,2014</span></div>

CSS

.main{    background-color: #666666;    border: 1px solID red;}h1{    background-color: #383838;    display: inline-block;    margin: 0;    padding: 0;}.main span{    display: inline-block;    vertical-align: mIDdle;}

jsFiddle

这似乎是一个简单的问题,但我无法解决它或者我太懒了.只想垂直对齐：中间并将它对齐到div的右边,如果我使用float：右边的元素附加到上面边框的底部.也不想使用行高.

解决方法 如果你想要一个不包括行高和浮动的解决方案,你也想要将跨度对齐到右边….

然后使用display：table;对于具有嵌套子元素设置为显示的父元素：table-cell;

Demo

.main{    background-color: #666666;    border: 1px solID red;    display: table;    wIDth: 100%;}h1{    background-color: #383838;    display: table-cell;    margin: 0;    padding: 0;    wIDth: 20%;}.main span{    display: table-cell;    vertical-align: mIDdle;    text-align: right;}

总结

以上是内存溢出为你收集整理的html – 垂直对齐元素全部内容，希望文章能够帮你解决html – 垂直对齐元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。