在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（已经居中在页面上）

回答

相关问题