Question

我一直试图让这个图片在页面中居中一段时间，并且出于某种原因margin-left: auto; margin-right: auto;没有做任何事情。所以本着疯狂地尝试一切的精神，我偶然发现了以下令人惊讶的正确结果。我的问题是，为什么实际上将宽度设置为25％？我原本预计会有100％，或至少50％。

这个小提琴显示了一些其他宽度，显然表现为非线性：http://jsfiddle.net/mo85kkvv/

（加分问题：是否有一种超级显而易见的方法来使用左边/右边的属性而不是我错过了？）

HTML：

<body>
    <div id="bcontainer">
        <img src="banner.png" alt="banner" />
    </div>
</body>

CSS：

body {
    margin: 0;
}

#bcontainer {
    width: 25%; /* why 25%?? */
    height: 50px;
    display: table-cell;
    text-align: center;
}

Answer 1

你的追求是什么？ http://jsfiddle.net/mo85kkvv/4/

HTML

    <body>
    <div class="container" id="one">
        <img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
    </div><br>

    <div class="container" id="two">
        <img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
    </div><br>

    <div class="container" id="three">
        <img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
    </div><br>

    <div class="container" id="four">
        <img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
    </div>
</body>

CSS

       body {

       }
        .container img{
            width:100%;
            display: inline;
            text-align: center;
            margin: 0 auto;
        }

        #one {
            width: 25%;
            margin: 0 auto;
        }

        #two {
            width: 50%;
            margin: 0 auto;
        }

        #three {
            width: 75%;
            margin: 0 auto;
        }

        #four {
            width: 100%;
            margin: 0 auto;


        }

Answer 2

我对HTML知之甚少，但我认为定义类容器的正确方法是：

.container {
    height: auto;
   display: block;
   margin:auto;
}

这更通用。您可以使用元素检查器，并查看图层的更改方式。

Answer 3

这一切都取决于你想要什么。您是否希望包装器以浮动在中心的图像为中心，或者您是否希望包装器（在这种情况下为.container）在图像周围收缩并成为浮在中心的图像？我已经用一些选项的简单例子更新了你的小提琴。

http://jsfiddle.net/mo85kkvv/6/

css图像居中的意外元素行为

3 个答案: