Question

我有以下内容：

<div class="sbr_bdy" style="background-color: Red;">
  <ul style="list-style-type:none; xmargin: 0 0 0 17px; padding: 0px;">
    <li>
      <a title="abc" href="www.cnn.com" class="btn">XXX</a>
    </li>
  </ul>
</div>

Fiddle example

我希望XXX地址链接在外部DIV的红色背景内水平居中显示。现在它似乎在右边。我有什么想法可以做到这一点？建议将不胜感激。

Answer 1

只需给出以下风格：

<li style="display:block;text-align:center;">

Answer 2

<li style="text-align: center;">
  <a title="abc" href="www.cnn.com" class="btn">XXX</a>
</li>

Answer 3

环绕中心标签的链接。

Answer 4

请参阅小提琴：http://jsfiddle.net/xavi3r/QeNKJ/

你应该做的是在你的CSS中添加text-align:center;。

此外，当您嵌套元素时，最好在要设置样式的元素之前调用嵌套元素，如果您为a { ... }添加了一个将全局应用于整个网站的样式。

尽量避免使用内联样式;更容易将它们放在样式表中：）

#sbr_bdy ul
{
    list-style-type:none; 
    margin: 0 0 0 17px; 
    padding: 0px;
    text-align:center;
    background:red;
    padding:6px 0;
}
#sbr_bdy ul li a{
    background:#eee;
    text-decoration:none;
    color:#333;
    font-family:Arial, sans-serif;
    font-size:11px;
    font-weight:bold;
    padding:3px 5px;
    border:1px solid #aaa;
    border-radius:3px;
    cursor:pointer;
}

#sbr_bdy ul li a:hover {
    background-color:#f2f2f2;
    border-color:#888;
    box-shadow:0 0 2px #ccc;
}

#sbr_bdy ul li a:active {
    background: #ddf;
}

如果我的地址链接位于<ul> </ul> </li>内的<li>中，我该如何居中？

4 个答案: