Question

注意

我正在使用bootstrap，因此当用户使用移动设备时，按钮元素的CSS会被display:none的媒体查询覆盖，因此它不会干扰我的图像居中。

我试图将我的图片放在div标记内。然而，这似乎有点棘手。当我使用text-align:center;时，它似乎没有做任何事情，margin:0 auto;也没有。

HTML Mark-Up：

<div class="navbar-header page-scroll">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
</div>

有没有人知道为什么它不会在div元素中居中？

Answer 1

您可以做的最好的事情是将包裹您的img的a标记居中：

＆＃13;

     a.navbar-brand {
         text-align:center;
         display:block;
     }

＆＃13;

        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
        </div>

＆＃13;

Answer 2

虽然它不符合HTML5，但几乎所有浏览器都支持它（我从未找到过不支持它的浏览器）：

<center>I am perfectly centered!</center>

中心标签。这里面的任何东西都会集中，img，div，什么。中心标记已弃用，但仍受到广泛支持。 <{1}}围绕<center></center>，你应该没问题。

中心标记是“古老的”，因此请先考虑其他答案

图像不会在标签中居中

2 个答案: