如何在水平和垂直对齐的内联块 [英] How to align an inline-block horizontally and vertically

问题描述

什么是最好的/清洁的使用 CSS 对齐 #dates DIV 右侧头的和垂直方向中的中间

我试过浮动：权，但不允许垂直对齐。我想避免使用花车，所以我使用 inline-block的，并使用相对定位。是否有一个更正确的方法呢？

我不喜欢的事实，我必须做的30像素顶部，并使用试验和错误，直到它的中心。

 ＆LT; D​​IV ID =头＆GT;
    ＆LT;一个ID =标志的href =〜/=服务器＆GT;
        ＆LT; IMG SRC =图像/接口/ logo.pngALT =标志/＆GT;
    ＆所述; / a取代;
    ＆LT; D​​IV ID =日期＆GT;
        ＆LT; D​​IV ID =回历日期大于2 Ramadhaan，1435 AH＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =公历日期＆GT;日2014年6月29日＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

的#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

这篇关于如何在水平和垂直对齐的内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！