在div中居中ul（已經居中在頁面上）

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

編輯：

我不需要「span」和「a.footer_link」w ithin footer被集中（而不是那些應該是非常左和非常正確的）。

來源

2013-10-01 renathy

您需要設置text-align: center;到離開你#footer

demo

那麼你可以使用float和浮動權這樣demo

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

來源

2013-10-01 09:19:38

我不需要其他工作人員進行cenetered，只是微升。我需要跨越左右，一個是正確的。 – renathy

添加text-align: center的風格爲footer。

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

JS小提琴：http://jsfiddle.net/WXYx8/3/

來源

2013-10-01 09:19:48

嘗試display: block，而不是display: inline-block。它似乎是做你在小提琴上描述的。

來源

2013-10-01 09:20:54 OrangeDog

「文本對齊」解決方案可能更好。 – OrangeDog

如果我添加塊，那麼它將「a」推到下一行，但它應該漂浮在右側。 – renathy

試試這個：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; 
}

來源

2013-10-01 09:26:25 goldJ

在div中居中ul（已經居中在頁面上）

回答

相關問題