CSS的text-align中心

我有以下的html：CSS的text-align中心

<div class="pagination"> 
     <ul id="paginationnbEnreg"> 
      <li class="active"> 
      <a onclick="changePageMP3('1');" title="Page 1" href="#">1</a> 
      </li> 
     </ul> 
     <span id="nbEnreg" class="label">55 found</span> 
    </div>

用下面的CSS：

.pagination { 
    margin: auto; 
    text-align: center; 
    outline: medium none; 
    padding: 0; 
    position: relative; 
    color: #000000; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    line-height: 18px; 
} 

.label { 
    color: #ffffff; 
    display: inline-block; 
    font-size: 11.844px; 
    font-weight: bold; 
    line-height: 14px; 
    padding: 2px 4px; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    vertical-align: baseline; 
    white-space: nowrap; 
}

我名单上的页面左侧会diplay而 “55发现”将显示在页面的中心。

我想让我的列表在页面中间，但无法让它工作。

来源

2015-12-02 Stan

我认为这是因为您没有删除list-style而没有重置margin和padding。

你的意思是这样的http://jsfiddle.net/06u4bsqn/？

来源

2015-12-02 13:27:04

设置display:inline-block这就是我想要做的居中（与跨度）。根据你在css类中所做的，我修改了自己的CSS以使其工作。谢谢！ – Stan

对于保证金：自动您的箱子需要宽度设置。否则，它需要100％。

来源

2015-12-02 13:25:46

您的ul是100％宽，因为它是块级元素。

您可以通过在ul

.pagination { 
 
    margin: auto; 
 
    text-align: center; 
 
    outline: medium none; 
 
    padding: 0; 
 
    position: relative; 
 
    color: #000000; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    line-height: 18px; 
 
    background: plum; 
 
} 
 
.pagination ul { 
 
    display: inline-block; 
 
} 
 
.label { 
 
    color: #ffffff; 
 
    display: inline-block; 
 
    font-size: 11.844px; 
 
    font-weight: bold; 
 
    line-height: 14px; 
 
    padding: 2px 4px; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
 
    vertical-align: baseline; 
 
    white-space: nowrap; 
 
}

<div class="pagination"> 
 
    <ul id="paginationnbEnreg"> 
 
    <li class="active"> 
 
     <a onclick="changePageMP3('1');" title="Page 1" href="#">1</a> 
 
    </li> 
 
    </ul> 
 
    <span id="nbEnreg" class="label">55 found</span> 
 
</div>

来源

2015-12-02 13:31:34

但是，如果我想添加一个其他元素到我的列表中，是不是把一个元素按行？我想在同一行上列出我列表中的所有元素。 – Stan

只需制作列表项即可。 –

CSS的text-align中心

回答

相关问题