HTML/CSS - 中心多個div內聯

我試圖完成一些相當基本的事情，但到目前爲止我沒有成功。我有一個圖像和一個標題，應該顯示在父選擇器（div）的中心。不幸的是，我不知道如何正確對齊它們，同時將標誌和文本居中。HTML/CSS - 中心多個div內聯

HTML：

<div class="content"> 
    <div class="header"> 
     <img src="path/to/image"> 
     <span>Hey this is my title</span> 
    </div> 
    </div>

CSS：

.header{ 
    text-align: center; 
    width: 100%; 
    height: 40px; 
} 
.header img{ 
    height: 40px; 
    width: auto; 
    display: inline-block; 
} 
.header span{ 
    display: inline-block; 
}

正如你所看到的標誌有一個靜態的寬度/高度，而文字可以有不同的高度。上面的代碼，使造型如下面的例子：

Example Image

誰能告訴我如何做到這一點？我基本上需要幾個div旁邊的eachother，但都在中心對齊。

來源

2016-05-10 Rik Lugtenberg

等一下...你想中心組：關於Flexbox的

.header { display: flex; flex-direction: row; align-items: center; justify-content: center; }

更多信息？或者標識必須始終居中？你到底在期待什麼？ –

如果你檢查圖像。我想要徽標旁邊的文字。但是它們是標題頂部和文本範圍頂部之間的空格。 –

我已經理解你的問題並回答了。請檢查... –

您是否在尋找vertical-align: middle來垂直居中？

.header { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 40px; 
 
} 
 
.header img { 
 
    height: 40px; 
 
    width: auto; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.header span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: #eef; 
 
}

<div class="content"> 
 
    <div class="header"> 
 
    <img src="//placehold.it/40?text=Logo" /> 
 
    <span>Hey this is my title</span> 
 
    </div> 
 
</div>

注：我添加背景的邊界更好的可視性。

一個更好的解釋：

來源

2016-05-10 08:45:48

使用Flexbox的。我不知道我是否正確地獲得了你希望你的物品在標題內水平和垂直居中。如果不是隻刪除justify-content部分。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2016-05-10 08:57:11 Senthe

HTML/CSS - 中心多個div內聯

回答

相關問題