html - 使用没有表格的 CSS 对齐标题

Question

我是 CSS 的新手，我正在尝试格式化新网站的标题。我在左侧有一个我想要的 Logo ，紧随其后的是我想要的标题。我的效果很好，但是如果我缩小窗口，文本就会出现在 Logo 下方。我希望文本换行。我可以使用表格轻松完成此操作，但据我了解，在页面布局中应避免使用表格。

这是 HTML:

<div class="image margin-right-5"></div>
<h1><%= siteName %></h1>

还有 CSS:

.image {
    height: 2em;
    width: 200px;
    display: inline-block;
    background: url(../Images/main-logo.png) no-repeat left center;
}

h1, h3 {
    display: inline-block;
    font-weight: normal;
    font-size: 1.875em;
    vertical-align: super;
}

这是一个缩小版本，显示了我想要的但使用的是表格。 http://jsfiddle.net/1Lof58xd/

那么我如何在不使用表格的情况下做到这一点呢？

Answer 1

给你http://jsfiddle.net/1Lof58xd/4/

您可以使用 div 并向元素添加显示表格/表格单元格，或者您可以使用子元素的宽度来占据父 div 100% 的宽度。

您可以查看 fiddle 的解决方案:)

HTML

<div class="full">
    <div class="half">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="half">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

<h2>Display Table</h2>
<div class="table">
    <div class="table-cell">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="table-cell">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

CSS

.full {
    width: 100%;
    overflow: hidden;
}
.half {
    width: 50%;
    float: left;
}
.hdrimage {
    max-width: 100%;
}

/* With Display table/table-cell */
.table{
    display: table;
    width: 100%;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}