インラインブロックのイメージとテキストのセンタリング

Question

私はイメージをテキストの隣りに置いています。インラインブロックの要素であり、センタリングに問題があります。私はdivの両方を含めると、text-align:centerを適用しようとしましたが、何も変わりません。私はまた、h1を表示するように変更しました。ブロックしてから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;}