如何水平和垂直对齐内联块

时间:2014-07-04 10:16:43

标签: html alignment vertical-alignment css

使用CSS#dates div与标题的右侧对齐,以及在中间垂直对齐,最好/最干净的是什么。

我尝试float: right,但这不允许vertical-align。我想避免使用浮点数,所以我使用inline-block,并使用相对定位。有更正确的方法吗?

我不喜欢这样一个事实:我必须做一个30px的顶部,并使用反复试验直到它居中。

<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;
}

4 个答案:

答案 0 :(得分:1)

您可以使用css display:table

#header {display:table; width:100%;}
#logo,
#dates {display:table-cell; vertical-align:middle}

Example

如果您想让#dates与正确的

对齐,您可能需要给#dates一个宽度

答案 1 :(得分:1)

使用内联块

使用已发布的HTML元素,尝试以下CSS:

#header {
    background-color: yellow;
    padding: 15px;
    text-align: justify;
    line-height: 0;
}
#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;
    line-height: 1.5;
    font-size: 14px;
    font-family:'Open Sans';
    color: black;
    background-image: url(http://placehold.it/100x100);
    background-position: center;
    padding-left: 32px;
}
#header:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

由于#header中有两个子元素,左侧徽标图像和右侧文本块,只需使用text-align: justify强制徽标在左侧,文本在右侧。

要使其正常工作,#header中至少需要两行。

要生成第二行,请使用伪元素:#header:after,它将在日期之后放置一个100%宽的空内联块。 width: 100%强制它开始并填充第二行,vertical-align: top摆脱了基线以下的额外空白区域。

要处理高度中的空白区域,请在line-height: 0中设置#header,这将允许伪元素的高度折叠为0.但是,您需要重置{{1}在line-height: 1.5中获取清晰的文字。

优点和缺点

使用这种方法,当页面宽度变小时,元素最终将换行为两行。

如果您想将元素保留在一行中,最好使用CSS表。

请参阅演示:http://jsfiddle.net/audetwebdesign/3U3w4/

答案 2 :(得分:0)

使用display: flex;属性,您可以将项目设置为水平和垂直居中。

Example

答案 3 :(得分:0)

我认为,垂直对齐的最佳方法是使用css:display-tablecss"display-table-cell属性。如果您想在id =“dates”中对齐正确的内容,则应在此块中使用css:display-inline-table

#header {
    background: #fff;
    padding: 15px;
    background: #ccc;
    display: table;
}
#logo {
    display: table-cell;
}
#dates {
    display: table-cell;
    text-align: right;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
}

See Fiddle