Question

我想在a-tag内部横向居中。问题是我无法设置跨度的高度和宽度。我的标记如下：

<div class="footer">
     <a href="#">
          <span>Show/Hide</span>
     </a>
</div>

和css：

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange; text-align:center;}
.footer a span {background:#FFF; font-size:12px; width:100px;}

我已经尝试了一切，但我想我需要某种浮动，但不知道。非常感谢帮助！： - ）

Answer 1

您无法设置display: inline元素的维度。

如果要明确设置宽度，可以让a和span都有display: block：

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange;} /* no need to center text, here */
.footer a span {
  display: block; /* give it a box layout */
  margin: 0px auto; /* center it horizontally */
  width:100px; /* give it explicit absolute size */
  text-align: center; /* you might center the content here, though */
  background:#FFF; font-size:12px;}

或者只是使用text-align: center正如您所做的那样：

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange; text-align:center;}
.footer a span {background:#FFF; font-size:12px;
  padding: 0px 30px;} /* if you only want some padding, and not a fixed width

Answer 2

请尝试以下方法： -

.footer a span {background：#FFF;字体大小：12像素;宽度：50％;显示：块; margin：0 auto;}

'内跨度'需要的宽度小于'外部'div（或页脚）以及边距：0设置为自动对齐。

Answer 3

你可以做到

<center> </center>

就像这样，

<div class="footer">
<center>
 <a href="#">
      <span>Show/Hide</span>
 </a>
</center>
</div>

在<a></a> </span>内水平居中<span>

3 个答案: