CSS替代

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

    margin: 0 auto; 
    text-align: center;

使用bootstrap网格时，上面的代码可能无法正常工作。以下是使用bootstrap 4和每个浏览器中的IT工作的快速解决方案

<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

你可以把任何列像col-sm-2,3,4 ....... 12

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

1. text-center使用p，a，button，h标签等，即直接包含数据或文本的所有标签

2. Flex它可以用于将完整元素对齐到另一个元素内，但是它有更多实用程序检查文档以供参考

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

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

另一个导入属性是flex-direction，即

flex-direction:column
flex-direction:row

根据所需的对齐类型使用弯曲方向

3. mx-auto（bootstrap类）

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; }