Question

这可能是一个愚蠢的问题但是我无法理解它。如何将元素（社交媒体图标）水平放置在中心，即使窗口调整大小，它们也不会中断？这是一个标记：

<div class="mob_social">
<p1>Your friends might want to fix their iPhones.</p1>
<div class="mob_icon">
    <ul>
        <li><a href="http://www.facebook.com/">
                    <img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
<li><a href="https://www.instagram.com">
                    <img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
 <li><a href="https://www.twitter.com">
                    <img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
    </ul>
</div>

我总是感到困惑，并且犹豫不决地问这个问题。我只是想知道如何做到这一点。这是我用图标创建的小提琴。目前图标是垂直的，但是如何将它们水平放置在页面的中心：

http://jsfiddle.net/msLuzrye/

Answer 1

将display:inline-block用于您的列表：

li{
    display: inline-block;
}

your updated fiddle

Answer 2

这里有一个水平对齐图标的小提琴，整个容器div以页面为中心。

http://jsfiddle.net/msLuzrye/5/

这里有两个主要技巧。我将<li>元素显示为inline-block，然后使用CSS转换将您的父<div>垂直居中。对于父div，定位absolute和top: 50%会将div的顶部放在页面的一半。 CSS变换与元素本身相关，因此transform: translateY(-50%)将您的元素拉回到页面自身高度的一半，从而实现完美的垂直居中。

您可以检查浏览器对CSS转换的支持here。

将元素放置在div的中心

2 个答案: