центрирование ul внутри div (то есть уже по центру страницы)

Question

Я не могу центра ul внутри div.

HTML:

<div id="footer"> <span class="copy">Copyrights 2014</span> 

    <ul class="hor_list" id="footer_menu"> 
     <li><a href="">HOME</a> 

     </li> 
     <li><a href="">SHOPS</a> 

     </li> 
     <li><a href="">CONTACT US</a> 

     </li> 
    </ul> <a href="" class="footer_link">www</a> 

</div> 

мне нужно footer_menu быть в центре. #footer сосредоточен на странице, мне нужно, чтобы footer_menu находился в центре нижнего колонтитула.

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
#footer { 
    text-transform: uppercase; 
} 
#footer { 
    color: #373737; 
    font-size: 10px; 
    line-height: 24px; 
    height: 24px; 
    width: 1000px; 
    margin: 0 auto; 
} 
.hor_list { 
    display: inline-block; 
} 
.hor_list li { 
    display: inline; 
} 
ol, ul { 
    list-style: none; 
} 

Здесь работает Jsfiddle: http://jsfiddle.net/WXYx8/

я что-то вроде этого пытается, не работает:

#footer_menu { 
    display: inline-block; 
    width: 300px; 
    margin: 0 auto; 
} 

EDIT:

мне не нужен "span" и "a.footer_link" w ithin footer, чтобы быть центрированным (вместо этого они должны быть очень левыми и очень правыми).

Answer 1

Вам нужно установить text-align: center; вашему #footer

demo

Тогда Вы можете использовать поплавок левый и правый поплавок, как это demo

.copy{ 
    float: left; 
} 
.footer_link{ 
    float: right; 
} 

Answer 2

Добавить text-align: center в стиле для footer.

#footer { 
    color: #373737; 
    font-size: 10px; 
    height: 24px; 
    line-height: 24px; 
    margin: 0 auto; 
    text-align: center; 
    width: 1000px; 
} 

JS Fiddle:http://jsfiddle.net/WXYx8/3/

Answer 3

display: block Попробуйте вместо display: inline-block. Казалось, это то, что вы описываете на скрипке.

Answer 4

попробовать это: http://jsfiddle.net/QVykC/

<div id="footer"> 
<span class="copy">Copyrights 2014</span> 
<a href="" class="footer_link">www</a> 
<ul class="hor_list" id="footer_menu"> 
    <li><a href="">HOME</a> 

    </li> 
    <li><a href="">SHOPS</a> 

    </li> 
    <li><a href="">CONTACT US</a> 

    </li> 
</ul> 

CSS

* { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
#footer { 
text-transform: uppercase; 
} 
#footer { 
color: #373737; 
font-size: 10px; 
line-height: 24px; 
height: 24px; 
width: 1000px; 
margin: 0 auto; 
} 
.hor_list { 
display: block; 
margin-right: auto; 
margin-left: auto; 
} 
.hor_list li { 
display: inline; 

} 
ol, ul { 
list-style: none; 
} 
#footer_menu { 
width: 300px; 
margin: 0 auto; 
} 

.copy { 
float: left; 
} 

.footer_link { 
float: right; 
}