0

我有这个CSS代码：

#header-topbar {
    width:100%;
    height:120px;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    position: absolute;
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
    border:1px solid black;
}
#logo-small {
    display:none;
}

然后这是我的响应式css：

@media screen and (max-width: 780px) {
    #header-right-content {
            display:none;
    }
    #logo {
        display:block;
        float: left;
        margin-top: 25px;
        width: 360px;
        height: 50px;
        border:1px solid black;
    }
}

然后是 HTML：

<div id="header-topbar">
<div id="logo"><img src="images/logo.png" width="360" height="50" /></div>
<div id="header-right-content"><?php
if($_SESSION["customer_loggedin"] == 'yes')
{
    echo 'Hello '.$_SESSION["customer_forename"].' '.$_SESSION["customer_surname"].' | <a href="/customer/index.php">Customer Centre</a> | <a href="/customer/logout.php">Logout</a>';
}
else
{
    echo '<a href="/customer/login.php">Customer Login</a>';
}
?><br /><br />
Tel: <?php echo $main_phone_number; ?><br />Email: <?php echo $company_emailaddress_sales; ?></div> <!-- header-right-content -->
</div>

出于某种原因，随着屏幕变小，我无法让徽标显示在页面的中心。div #logo 不会在页面中居中。

有什么想法可能导致这种情况吗？

4

2 回答 2

2

Since you're using an absolute positioned div use left and margin-left to center it:

@media screen and (max-width: 780px) {
    #header-right-content {
        display:none;
    }
    #logo {
        display:block;
        float: left;
        margin-top: 25px;
        width: 360px;
        height: 50px;
        border:1px solid black;
        left: 50%; //this centers the left side of the div to the page
        margin-left: -180px; //this subtracts half the width to center it on the page
    }
}
于 2013-05-16T00:45:24.847 回答
0

float:left;正是这样做的。它将元素浮动到左侧。您希望<img>标签在#logo元素中居中，还是#logo元素在其父元素中居中？

如果要使div元素居中，请使用margin: 0 auto;. 

#logo {
  position: absolute;
  float: left;
  margin-left: 25px auto 0;
  width: 360px;
  height: 50px;
  border:1px solid black;
}

此外，这是一个非常标准的做法和简单的解决方案，您应该能够自己找到，即使在这个被无数次询问的网站上也是如此。我不会因为这样的问题标记人们，但这个网站上的很多人都会这样做。太多的标志会让你被禁止再问问题，所以在在这里发布问题之前一定要彻底研究它。

于 2013-05-16T00:37:31.570 回答