не деление с отображением в центре страниц

Question

у меня есть этот 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 не будет центрировать на странице.

любые идеи, что может быть причиной этого?

Answer 1

Поскольку вы используете абсолютный позиционируется использование ДИВ влево и Маржа налево к центру его:

@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 
    } 
} 

Answer 2

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; 
} 

Кроме того, это чрезвычайно стандартная практика и простое решение, которое вы должны быть в состоянии найти по своему усмотрению, даже на этом сайте, где это было предложено бесчисленное количество раз. Я не буду отмечать людей такими вопросами, но многие люди на этом сайте будут. Слишком много флагов вам запрещается задавать больше вопросов, поэтому не забудьте тщательно изучить его, прежде чем размещать вопросы здесь.