以內嵌塊圖像和文本爲中心

Question

我在文本旁邊放置了一個圖像，這兩個內嵌塊元素都很難對中。我已經嘗試在div中應用text-align:center，但沒有任何變化。我也想過將h1更改爲顯示：block，然後應用text-align:center，但我希望文本和標題都相對於其下面的內容居中，而不是整個事件與展示位置稍微偏離中心的形象。

HTML：

<img src="logo.svg"> 
<h1 id="logo-text">TITLE</h1> 

CSS：

header img { 
    display:inline-block; 
    margin:0 auto; 
    height:50px; 
} 

header h1#logo-text { 
    display:inline-block; 
    float:none; 
    margin:0 auto; 
    height:50px; 
    line-height:50px; 
} 

Answer 1

header { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
header img { 
 
    height: 50px; 
 
} 
 
header h1#logo-text { 
 
    display: inline-block; 
 
    margin: 0; 
 
    height: 50px; 
 
    line-height: 50px; 
 
}

<header> 
 
    <img src="https://unsplash.it/200"> 
 
    <h1 id="logo-text">TITLE</h1> 
 
</header> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit eu diam et dapibus. Vestibulum mattis augue et gravida tincidunt. Etiam congue nisl id sem ornare, ac dignissim est aliquet. Aenean at venenatis est. Maecenas nunc tellus, imperdiet 
 
    nec eros eu, ultrices euismod turpis. Donec faucibus gravida lectus, sit amet maximus nulla posuere id. Aliquam pulvinar dui non arcu tincidunt, nec maximus sem pretium. Sed aliquet dolor ac lectus aliquam, sit amet aliquam tortor imperdiet. Proin vitae 
 
    diam tincidunt elit lobortis ultricies. Praesent tristique ex scelerisque posuere placerat.</p> 
 

 
<p>Suspendisse potenti. Curabitur vel dictum odio. In congue egestas odio at lacinia. Aliquam vehicula felis nec faucibus vestibulum. Morbi sed augue accumsan, eleifend elit eget, luctus urna. Integer quis facilisis est. Ut at pretium erat. Mauris at neque 
 
    justo. Ut eu ligula pretium, volutpat justo quis, malesuada turpis. Integer id consectetur urna. Etiam mauris enim, mattis ac finibus id, volutpat eget sapien. Donec quis libero sapien.</p>

您可以使用flex將它放置在中心位置，不會有任何髒陋。不需要額外的標記。

Answer 2

header img { 
 
    display:inline-block; 
 
    margin:0 auto; 
 
    height:50px; 
 
} 
 

 
header h1#logo-text { 
 
    display:inline-block; 
 
    float:none; 
 
    margin:0 auto; 
 
    height:50px; 
 
    line-height:50px; 
 
}

<header style="text-align:center;" > 
 
    <img src="http://www.lessons4living.com/images/penclchk.gif"> 
 
    <div style="clear:both;display:block;" ></div> 
 
    <h1 id="logo-text">TITLE</h1>  
 
</header>

Answer 3

添加以下css規則。

header{text-align: center;}