什么是最好的/清洁的使用 CSS
对齐 #dates DIV
右侧头的和垂直方向中的中间
我试过浮动:权
,但不允许垂直对齐
。我想避免使用花车,所以我使用 inline-block的
,并使用相对定位。是否有一个更正确的方法呢?
我不喜欢的事实,我必须做的30像素顶部,并使用试验和错误,直到它的中心。
< DIV ID =头>
<一个ID =标志的href =〜/=服务器>
< IMG SRC =图像/接口/ logo.pngALT =标志/>
&所述; / a取代;
< DIV ID =日期>
< DIV ID =回历日期大于2 Ramadhaan,1435 AH< / DIV>
< DIV ID =公历日期>日2014年6月29日< / DIV>
< / DIV>
< / DIV>
的#header
{
背景颜色:白色;
填充:15px的;
位置:亲属;
}
#logo
{
显示:inline-block的;
垂直对齐:中间;
}
#logo IMG
{
垂直对齐:底部; / *摆脱文字伸部分空间,图像下面* /
}
#dates
{
显示:inline-block的;
位置:绝对的;
右:30PX;
顶:30像素;
字体大小:14px的;
字体家庭:打开三世;
颜色:#696969;
背景:网址(图片/接口/日期的icon.png)不重复;
背景位置,Y:中心;
填充左:32PX;
}
解决方案
您可以使用CSS 显示:表
:
的#header {显示:表;宽度:100%;}
#logo,
#dates {显示:表细胞;垂直对齐:中间}
例
您可能需要给#dates的宽度,如果你希望它是相一致的权利
What is the best/cleanest using CSS
to align the #dates div
to the right side of the header, and vertically in the middle.
I tried float: right
, but that does not allow the vertical-align
. I want to avoid using floats, so I am using inline-block
, and using relative positioning. Is there a more correct approach?
I do not like the fact that I have to do a top of 30px, and using trial and error until it centers.
<div id="header">
<a id="logo" href="~/" runat="server">
<img src="Images/Interface/logo.png" alt="logo" />
</a>
<div id="dates">
<div id="hijri-date">2 Ramadhaan, 1435 AH</div>
<div id="gregorian-date">Sunday 29 June 2014</div>
</div>
</div>
#header
{
background-color: white;
padding: 15px;
position: relative;
}
#logo
{
display: inline-block;
vertical-align: middle;
}
#logo img
{
vertical-align: bottom; /* to get rid of text descender space underneath image */
}
#dates
{
display: inline-block;
position: absolute;
right: 30px;
top: 30px;
font-size: 14px;
font-family: 'Open Sans';
color: #696969;
background: url(Images/Interface/date-icon.png) no-repeat;
background-position-y: center;
padding-left: 32px;
}
解决方案
You can make use of css display:table
:
#header {display:table; width:100%;}
#logo,
#dates {display:table-cell; vertical-align:middle}
Example
You may need to give the #dates a width if you want it to be aligned to the right
上一篇:未对齐的内存访问内存