7

center人们对这个标签皱眉，但对我来说，它总是按照我想要的方式工作。尽管如此，center已被弃用，所以我会努力。

现在我看到很多人建议使用神秘的 CSS margin: 0 auto;，但我什至无法让它工作（参见 fiddle here）。其他人会去修改positionor display，但这总是会破坏其他东西。

如何使span使用 css 居中，使其行为与center标签完全相同？

<div class="container">
  <span class='btn btn-primary'>Click me!</span>
</div>
4

5 回答 5

10

Span是一个内联元素，而margin: 0 autofor centering 仅适用于宽度小于 100% 的非内联元素。

一种选择是在容器上设置对齐方式，尽管在这种情况下这可能不是您想要的：

div.container { text-align: center }

http://jsfiddle.net/MgcDU/1270/

另一个选项是更改显示属性span：

/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary { 
  display: table;
  margin: 0 auto;
}

使用display: table消除了对特定宽度进行硬编码的需要。它会根据其内容缩小或增长。

http://jsfiddle.net/MgcDU/1271/

于 2013-01-11T21:12:57.790 回答
2

您可以进行设置.container { text-align:center; }，以使里面的所有内容div.container都居中。

一般来说，有两种方法可以使事物居中。

  1. 要将内联元素（例如文本、跨度和图像）居中在其父级内，text-align: center;请在父级上设置。
  2. 要使块级元素（例如标题、div 或段落）居中，它必须首先具有指定的宽度（width: 50%;例如）。然后将左右边距设置为自动。您的示例margin: 0 auto;说顶部和底部边距应该为 0（这对于居中无关紧要）广告左右边距应该是自动的 - 它们应该彼此相等。

该<center>元素实际上只是一个带有text-align:center;. 如果你发送border: solid red 1px;它，你可以看到它是 100% 宽的，并且里面的所有东西都是居中的。如果您更改text-align为向左，则其子项不再居中。示例：http: //jsfiddle.net/KatieK/MgcDU/1275/。也许你应该只考虑你的<div class="container">withtext-align:center; }相当于<center>.

于 2013-01-11T21:11:55.883 回答
1

你使 span 块级别，给它一个宽度，以便 margin:auto 工作

看到这个小提琴

.center {
         display:block;
         margin:auto auto;
         width:150px; //all rules upto here are important the rest are styling
         border:1px solid black;
         padding:5px;
         text-align:center;
}

更新：为了不指定宽度并在跨度上具有元素的自然宽度，您必须在父级上使用 textalign

看到这个小提琴

.container{text-align:center}
.center {
  border:1px solid black;
  padding:5px;
}
于 2013-01-11T21:13:21.390 回答
-1

<span>是一个内联元素。<div>是块元素。这就是为什么它没有居中。

<div class="container" style='float:left; width:100%; text-align:center;'>
  <span class='btn btn-primary'>Click me!</span>
</div>

只有将 span 的内容转换为块时，才能使用“inline-block”样式将其居中。

于 2013-01-11T21:06:57.403 回答
-1

您的父元素需要具有更大的宽度才能让子元素定位在其中。之后的技巧margin: 0 auto;是让父子容器position和display值相互兼容。

.container {
  border: 2px dashed;
  width: 100%;}

.btn {
  display: block;
  margin: 0 auto;
  width: 25%;
}

http://jsfiddle.net/rgY4D/2/

于 2013-01-11T21:18:44.563 回答