Question

我知道这个问题已被多次询问过，但我从来没有看到过满意的答案。我的意思是，答案确实有效。

所以，我们再来一次。拿这个jsFiddle：http://jsfiddle.net/KFMyn/3/

如果从HTML中删除align="center"，您需要使用哪些CSS才能使结果与原始结果相同？

我找到的答案通常等于margin:0 auto和/或text-align:center，但这些答案都没有达到预期效果，使结果与原始结果相同。

Answer 1

文本对齐中心覆盖了大部分文本元素，但需要一些额外的内容来对齐表格

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

Answer 2

div {width:400px; text-align: center;}
table {display:inline-block;}

除了保罗的回答之外，还应该有效。

http://jsfiddle.net/KFMyn/13/

Answer 3

div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

适合我。但是当你有多个嵌套的dom元素时，这可能无法正常工作

Answer 4

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

在使用引导网格时，以上代码可能不起作用。这是使用引导程序4和每个浏览器中的IT都能正常工作

的快速解决方案

display:flex;
justify-content:center;
align-items:center;

您可以放置任何列，例如col-sm-2、3、4 ....... 12

在不同情况下替换中心标签

1。文字中心 适用于p，a，button，h标签以及更多标签，即所有直接包含数据或文本的标签

2。弹性 它可以用于将另一个元素内的完整元素对齐，但是它具有更多实用程序，请查阅文档以供参考

Use可以按以下方式使用flex使元素居中

flex-direction:column
flex-direction:row

另一个导入属性是弹性方向，即

NOTIFY

根据所需对齐方式使用弯曲方向

3。 mx-auto（引导程序类）

Answer 5

您也可以尝试对表格进行样式设置，如下所示：

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}

Answer 6

为什么不离开呢 <div align="center"> 据我所知，它仍适用于所有浏览器。我有很多旧的HTML，我只是因为我的NetBeans IDE警告我这已经过时了。我的猜测是浏览器会自动转换为正确的解决方案。同样的事情 <font size="6">bla bla</font> 仍然工作得很好，可能会自动转换为 <span style="font-size:36px">bla bla</span>

Answer 7

div { width: 400px; text-align: center; }
table { display: inline-block; }

这应该有效。在此处查看示例：http://jsfiddle.net/ye7ngd3q/2/

如果要使表格单元格中的元素左/右对齐，则可以定义各个类并分别分配给元素，如下所示：

HTML

<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

CSS

div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }

CSS替换<div align =“center”> </div>

7 个答案:

在不同情况下替换中心标签