Question

因此，作为一名新手网络开发人员，我坚持如何将所有3个图像置于屏幕中间。我读了它并遇到了margin:auto;。尝试过，没用。

这是CSS：

<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
    margin:auto, auto;
}
</style>

这是HTML：

<div class="main_block">
<a href="#"><img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"></a> <a href="#"><img class="social" src="http://lorempixel.com/400/200/" alt="Google +"></a> </a>
</div>

非常感谢帮助。

Answer 1

我不确定你是否希望它们相互叠加，或者只是让它们居中。

将它们叠加在一起

JSFiddle

要将它们叠加在一起，您希望position:absolute;标记中包含.social，这样他们就不会互相避免。问题是，margin:auto;将不起作用。我发现解决此问题的唯一解决方案是将left:和right:位置设置为1%;。

只需将它们置于中心

JSFiddle

这个只是让他们居中。您只想使用margin-left:auto;和margin-right:auto;。这样，您就不需要使用position:absolute;。

Answer 2

FIDDLE

您需要将图像显示为块，然后应用margin auto

您的HTML也不正确：

<div class="main_block">
    <div class="ib">
        <a href="#">
            <img class="social" src="http://lorempixel.com/50/50/" /> 
        </a>
        <a href="#">
            <img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
            </a>
        <a href="#">
            <img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
        </a>
    </div>
</div>

CSS：

.social
{
    float: left;
}

.ib {
    display: inline-block;
}

.main_block {
    text-align: center;
}

Answer 3

您必须在主块类上设置宽度并删除逗号。

你的风格应该是这样的：

.main_block
{
    width: 40em;
    margin:0 auto;
}

如何在屏幕上居中

3 个答案: