由於社交媒體圖標而無法集中標題？

我已經把社交媒體圖標放在了我的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>

來源

2016-04-18 Barek

H1 {文本對齊：中心;} ?? –

1.你的問題標籤是不正確的（標題 - 你的例子中沒有真正的標題，中心 - 可能是你的問題的答案，但目前我沒有看到'中心'標籤，'圖標' - 根本不相關）。 2.缺少css文件，我們沒有在你的代碼中看到你是如何試圖把你的標題居中。 3.「我不能把我的標題集中起來」 - 這意味着什麼？它對齊了嗎？對？更好地描述你的問題。請編輯您的答案和標籤，並添加相關的css代碼以獲得更好的幫助。 –

你的HTML有一個錯誤...你有多個右括號爲你的youtube屬性..''但這與你的問題沒有關係...... – chrisv

沒有絕對定位的元素之一，你不能做到這一點。

絕對定位將元素排除在流程之外，因此它會忽略其周圍的其他元素。

在這裏，我將「社交」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

來源

2016-04-18 14:38:28

謝謝！ – Barek