Текст не выравнивающий центр, левый

Question

Хороший день

У меня плохой день CSS. У меня есть 3-столбцовый div (горизонтальный, вот почему я использую float), но я хочу выровнять текст в центре, но слева от содержащего столбца div.

HTML:

<div id="footer"> 
     <div class="footerColumn"> 
      <ul> 
       <li><a>Contact Us</a></li> 
       <li><a>Home</a></li> 
       <li><a>Emergency Numbers</a></li> 
      </ul> 
     </div> 
     <div class="footerColumn"> 
      <ul> 
       <li><a>Support</a></li> 
       <li><a>Privacy Policy</a></li> 
       <li><a>Terms of Use</a></li> 
       <li><a>Careers</a></li> 
      </ul> 
     </div> 
     <div class="footerColumn"> 
      <ul> 
       <li><p><a>login</a></p></li> 
       <li><a>Sign Up</a></li> 
      </ul> 
     </div> 
     <div style="clear: both;"></div> 

</div> 

CSS:

#footer { 
    width: 960px; 
    margin: 0 auto; 
    padding: 10px; 
    background: url('/images/bg2.png') repeat-x center; 

    border-top: 6px solid #f3911f; 
    background: #1b1d21; 
} 
    #footer div.footerColumn { 
     position: relative; 
     float: left; 
     width: 33%; 
     margin: 0 auto; 
     text-align: justify; 
    } 
    #footer div.footerColumn ul li { 

    } 
    #footer ul li a{ 
     color: #fff;   
     font-family: Arial, sans-serif; 
     font-size: 14px; 
     text-decoration: none; 
     cursor: pointer;  
    } 
    #footer div.disclaimer { 
     color: #ccc; 
     font-family: verdana, Arial, sans-serif; 
     font-size: 12px; 

    } 

SEE MY FIDDLE

Спасибо

Answer 1

Причина, почему вы не можете отцентрировать <ul> элемент в дизайне потому, что <li> элементы растягивания ширину родительского <ul> до 100%, поэтому с помощью margin: 0 auto не будет работать.

Вместо этого, я предлагаю вам использовать display: inline-block для <ul> - позволяет ему только растянуть, насколько ширину внутреннего содержимого (ребенок <li> элементов), а не по ширине на 100% содержащий элемент.

Что касается детей <li>, вы можете установить их для отображения в виде элемента блока, поплавать их влево, а затем очистить левый поплавок, заставляя каждый плавающий элемент запускаться на новой строке (поскольку вы очищаете левый float для каждого элемента).

Просто реализовать стиль, предложенный следующим образом:

#footer ul { 
    display: inline-block; 
    overflow: hidden; 
} 
#footer ul li { 
    display: block; 
    float: left; 
    clear: left; 
} 
#footer ul li a{ 
    color: #fff; 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    text-decoration: none; 
    cursor: pointer;  
} 

Проверьте скрипку здесь;) http://jsfiddle.net/teddyrised/DvXzB/48/

Answer 2

text-align:center Используйте в своих footerColumn дивы.

#footer div.footerColumn { 
     position: relative; 
     float: left; 
     width: 33%; 
     margin: 0 auto; 
     text-align: center; 
    } 

Answer 3

#footer div.footerColumn { 
    position: relative; 
    float: left; 
    width: 33%; 
    margin: 0 auto; 
    text-align: center; /*new here*/ 
} 
#footer div.footerColumn ul { 
float: left; /*new here*/ 
}