ソーシャルメディアアイコンのためにタイトルを中央に置くことはできませんか？

Question

私は自分のhtmlの右側にソーシャルメディアのアイコンを置いてきましたが、私のタイトルをもう中央に置くことはできません。どうすればこの問題を解決できますか？

すでにtext-align: centerを試しましたが、うまくいきません。

#socialm{ 
    float:right; 
} 
#socialm ul li{display: inline;} 

<header> 
    <div id="socialm"> 
    <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" width= "45px" height="45px"/></a> 
    <a href="https://www.instagram.com" target="_blank"><img src="instragram.png" width= "45px" height="45px"/></a> 
    <a href="https://www.youtube.com/channel/..." target="_blank"><img src="youtube.png" width= "45px" height="45px"/></a> 
    </div> 
    <h1>Photography and visual arts</h1> 
</header> 

Answer 1

あなたは絶対に要素の一つを配置せずにこれを行うことはできません。ここで

は、ソリューションです。

絶対配置では、フローから要素を取り除いて、その周囲の他の要素を無視します。

ここでは、「ソーシャル」divをフローティングではなく右側に配置しました。見ることができるように、見出しは今中心になっています。

あなたはポジショニングの欠点を見ることもできます。慎重なサイジングなしで、オーバーラップします。メディアクエリはこれに対処できます。

#socialm { 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
#socialm ul li { 
 
    display: inline; 
 
} 
 
header { 
 
    text-align: center; 
 
}

<header> 
 
    <div id="socialm"> 
 
    <a href="https://www.facebook.com" target="_blank"> 
 
     <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" /> 
 
    </a> 
 
    <a href="https://www.instagram.com" target="_blank"> 
 
     <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" /> 
 
    </a> 
 
    <a href="https://www.youtube.com/channel/..." target="_blank"> 
 
     <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" /> 
 
    </a> 
 
    </div> 
 
    <h1>Photography and visual arts</h1> 
 
</header>

JSFiddle Demo

Answer 2

私は、これはあなたが探しているものであるかどうかわからないんだけど、私は単純にあなたのH1タグにtext-align:center;を追加しました。 http://codepen.io/Glenvig/pen/dMeaQm