使用沒有表格的CSS對齊標題

Question

我是新來的CSS，我想格式化新網站的標題。我在左邊有一個標誌，我想在它後面立即有一個標題。我有這樣的工作，但如果我縮小窗口，文本將在徽標下。我想要文字換行。我可以很容易地用表格完成這個工作，但據我所知，應該避免在頁面佈局中使用表格。

下面是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％做到。

您可以檢查搗鼓的解決方案:)

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