Html 如何水平和垂直对齐内联块 使用 CSS 最佳的/最干净的是将日期DIV/COD>对齐到标题的右侧，并垂直于中间。

我尝试了

float:right

，但这不允许

垂直对齐。我希望避免使用浮动，因此我使用
内联块
，并使用相对定位。有没有更正确的方法

我不喜欢这样的事实，我必须做一个30像素的顶部，并使用试错，直到它的中心

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


拉马丹2号，1435 AH
2014年6月29日星期日
#标题
{
背景色：白色；
填充：15px；
位置：相对位置；
}
#标志
{
显示：内联块；
垂直对齐：中间对齐；
}
#标志img
{
垂直对齐：底部；/*以消除图像下方的文本下行空间*/
}
#日期
{
显示：内联块；
位置：绝对位置；
右：30px；
顶部：30px；
字体大小：14px；
字体系列：“开放式SAN”；
颜色：#6969；
背景：url（image/Interface/date icon.png）不重复；
背景位置y：中心；
左侧填充：32px；
}
您可以使用css
显示：表格
：

#标题{显示：表格；宽度：100%；}
#标志，
#日期{显示：表格单元格；垂直对齐：中间}


如果希望使用
display:flex将#dates向右对齐，则可能需要为#dates指定一个宽度
属性可以将项目设置为水平和垂直居中

使用内联块

使用发布的HTML元素，尝试以下CSS：

#标题{
背景颜色：黄色；
填充：15px；
文本对齐：对齐；
线高：0；
}
#标志{
显示：内联块；
垂直对齐：中间对齐；
}
#标志img{
垂直对齐：底部对齐；
/*消除图像下方的文本下行空间*/
}
#日期{
显示：内联块；
线高：1.5；
字体大小：14px；
字体系列：'opensans'；
颜色：黑色；
背景图片：url(http://placehold.it/100x100);
背景位置：中心；
左侧填充：32px；
}
#标题：之后{
内容：''；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
}

由于在
#header
中有两个子元素，一个左徽标图像和一个右文本块，只需使用
文本对齐：对齐
将徽标强制向左，将文本强制向右

要使其正常工作，您需要在
#标题中至少有两行

要生成第二行，请使用伪元素：
#header:after
，它将在日期后放置一个100%宽的空内联块。
宽度：100%
强制它开始并填充第二行，而
垂直对齐：顶部
消除基线下方多余的空白

要处理高度中的空白，请在
#header
中设置
行高度：0，这将允许伪元素的高度塌陷为0。但是，您需要在
#dates
中重置
行高：1.5
，以获得清晰的文本

优点和缺点

使用这种方法，随着页面宽度变小，元素最终将换行为两行

如果希望将元素保持在一行上，最好使用CSS表

请参见演示：
我认为，垂直对齐的最佳方式是使用
css:display table
和
css“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;
}

设置一个项目为左对齐，另一个项目为右对齐时出现问题……您能举个例子吗？单元格是否可能是其内容的宽度而不是50%？CSS表格对该应用程序有好处。在右侧表格的文本块周围有一个子包装div可能会有所帮助单元格，这样就可以使用文本右对齐，而无需担心表格单元格的确切宽度。