оставшийся центр после поплавка на 2 divs

Я пробовал много способов, но он еще не смог работать. У меня есть два div на заголовке, для заголовка слева для логотипа и заголовка справа для навигаторов. Итак, я должен его плавать. но все же я не могу попасть в центр веб-сайта.оставшийся центр после поплавка на 2 divs

Это мой код

<div id="header"> 
    <div id="header-center"> 
     <div id="headerleft"> 
      <h1> Hello </h1> 
      <p> caption </p> 
     </div> 

     <div id="headerright"> 
      <ul> 
       <li> <a href="index.php"> HOME </a> </li> 
       <li> <a href="work.php"> WORKS </a> </li> 
       <li> <a href="cv.php"> CV </a> </li> 
       <li> <a href="blog.php"> BLOG </a> </li> 
       <li> <a href="contact.php"> CONTACT </a> </li> 
      </ul> 
     </div> 
    </div> 
</div> 
</div>

И это мой CSS ..

#header { 
    height:100px; 
    border-bottom:2px solid grey; 
    background-color:#000; 
    color:#FFF; 
} 

#header-center { 
    margin:0 auto; 
} 

#headerleft { 
    float:left; 
} 

#header h1 { 
    padding:2px 15px; 
    font-size:30px; 
} 

#header p { 
    padding:2px 15px; 
    font-size:20px; 
} 

#headeright { 
    float:right; 
} 

#headerright ul li{ 
    float:left; 
    list-style:none; 
    margin:15px; 
} 


#menu li a { 
    font-size: 15px; 
    color:#FFF; 
    text-decoration:none; 
    float:left; 
} 

#menu li:hover a { 
    color:grey; 
}

Чтобы быть ясно, вы можете посмотреть в JSFIDDLE.

Кто-нибудь может найти решение для этого? Спасибо

источник

2014-01-12 Anthosiastic

Я не понимаю. Что вы пытаетесь сосредоточить? Вы упомянули левое и правое плавание, но какой элемент нужно центрировать? –

# header-center, я думаю. –

@MiheyEgoroff Но 'header-center' содержит левые и правые, поэтому я не точно на 100%, что предполагаемый макет. –

margin: 0 auto; работает только если вы определили ширину, так что вы должны дать ширину #header-center:

, например:

#header-center { 
    margin:0 auto; 
    width: 90%; 
}

источник

2014-01-12 17:05:43 bugovicsb

Ahhh .. я забыл положить% .. Спасибо за напоминание! – Anthosiastic

Если вы установили display: table; элемент возьмет маркер: 0 auto; без явно заданной ширины. Однако это решение вводит другие потенциальные проблемы, поэтому, если вы можете установить ширину, сделайте это. –

Можете ли вы попробовать это ???

#header { 
    height:100px; 
    border-bottom:2px solid grey; 
    background-color:#000; 
    color:#FFF; 
} 

#header-center { 
    margin:0 auto; 
} 

#headerleft { 
    float:left; 
} 

#header h1 { 
    padding:2px 15px; 
    font-size:30px; 
} 

#header p { 
    padding:2px 15px; 
    font-size:20px; 
} 

#headeright { 
    float:right; 
    width:500px; 

} 
#headerright ul{ 
margin:0 auto; width:500px; 
     padding: 35px; 
} 
#headerright ul li{ 

    list-style:none; 
    float: left; 
    width:100px; 



#menu li a { 
    font-size: 15px; 
    color:#FFF; 
    text-decoration:none; 
    float:left; 
} 

#menu li:hover a { 
    color:grey; 
}

источник

2014-01-12 17:02:32

оставшийся центр после поплавка на 2 divs

ответ

Смежные вопросы