Центрирование плавающей улицы в div с css

По какой-то причине приведенный ниже код не центрирует мой неупорядоченный список (у меня есть стиль поля в html). Я не могу понять, почему ... любые идеи?Центрирование плавающей улицы в div с css

HTML:

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="StyleSheet" type="text/css" href="organicForUs.css" /> 
</head> 
<body> 
    <div id="content"> 
     <img id="logo" src="logo.png" /> 
    </div> 
    <div id="footie" style="margin-left: auto; margin-right: auto;"> 
     <ul> 
      <li><p id="aboutP">about</p></li> 
      <li><p id="addP">add your store</p></li> 
      <li><p id="reportP">report a missing store</p></li> 
      <li><p id="advertiseP">advertise with us</p></li> 
     </ul> 
    </div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="organicForUs.js"></script> 
</body>

CSS:

#footie li { 
list-style-type: none; 
float: left; 
    } 
#footie p { 
font-family: sans-serif; 
font-size: 11px; 
color: white; 
font-weight: bold; 
padding-left: 10px; 
}

источник

2012-02-17 user1086348

Во-первых, у вас есть запас, примененной к родителю UL, а не в UL. Если вы хотите UL, а НЕ #footie, вам придется перемещать объявления стиля (которые не должны быть встроенными, так или иначе).

Кроме того, для маржи: автоматический трюк для работы, вам необходимо объявить ширину. Что-то вроде:

#footie ul { 
    width: 600px; 
    margin: 0 auto; 
}

источник

2012-02-17 17:41:37 chipcullen

ahh Я не знал, что вам нужно было объявить ширину ... спасибо – user1086348

Он должен работать с относительными единицами (например, процентами). – chipcullen

Если это работает, можете ли вы «принять» ответ? – chipcullen

предложенный выше решение имеет один нюанс: Вам необходимо предварительно указать div> 's ширина <. Это сломается, если в ul добавится больше предметов. Вот лучшее решение:

#footie { 
    float:left;  *** 
    width:100%;  *** 
    overflow:hidden; *** 
    position:relative;*** 
} 
#footie ul { 
clear:left; 
float:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; *** 
left:50%;   *** 
text-align:center; // optional, if you want to center the text 
} 
#centeredmenu ul li { 
    position:relative; *** 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    right:50%;   *** 
}

Пожалуйста, обратите внимание, что линии, отмеченные тремя звездами (***), являются линиями, которые абсолютно необходимы для этого, чтобы работать.

Но это решение более динамично. См. Эту статью: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Удачи!

источник

2012-08-20 10:03:03

Центрирование плавающей улицы в div с css

ответ

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