Html <div align="center"> 的 CSS 替换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9500025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS replacement for <div align="center">
提问by Mr Lister
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
我知道这个问题已经被问过很多次了，但我从来没有看到一个满意的答案。我的意思是，一个真正有效的答案。
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
所以，我们又来了。拿这个 jsFiddle：http: //jsfiddle.net/KFMyn/3/
If you remove the align="center"from the HTML, what CSS do you need to use to make the result look the same as the original?
如果align="center"从 HTML 中删除，需要使用什么 CSS 才能使结果看起来与原始结果相同？
The answers I found usually amount to margin:0 autoand/or text-align:centerbut neither of those have the desired effect of making the result look the same as the original.
我找到的答案通常等于margin:0 auto和/或text-align:center但这些都没有使结果看起来与原始结果相同的预期效果。
回答by Paul Sheldrake
The text align center covers most of the text elements but a little extra is needed to centre align the table
文本对齐中心覆盖了大部分文本元素，但需要一些额外的内容来居中对齐表格
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
回答by Andre Loker
div {width:400px; text-align: center;}
table {display:inline-block;}?
Should work as well in addition to Paul's answer.
除了保罗的回答之外，也应该有效。
回答by pduersteler
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
为我工作。但是当您有多个嵌套的 dom 元素时，这可能无法正常工作
回答by Nishant Singh
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids. Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
当您使用引导网格时，上面的代码可能不起作用。这是使用 bootstrap 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
you can put any column like col-sm-2, 3, 4.......12
你可以把任何列像 col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
不同情况下中心标签的替换
1. text-centerWorks with p, a, button, h tags and more i.e all the tags containing data or text directly
1. text-center适用于 p、a、button、h 标签等，即所有直接包含数据或文本的标签
2. FlexIt can used to align complete element inside another element, however it has more utilities check documentation for reference
2. Flex它可以用来在另一个元素内部对齐完整的元素，但是它有更多的实用程序检查文档以供参考
Use can center elements using flex in following manners
使用可以通过以下方式使用 flex 居中元素
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
另一个导入属性是 flex-direction ，即
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
根据您想要的对齐类型使用 flex 方向
3. mx-auto (bootstrap class)
3. mx-auto（引导类）
回答by sikrigagan
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
这应该有效。在此处检查示例：http: //jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
如果您希望表格单元格内的元素左/右对齐，那么您可以定义单个类并分别分配给元素，如下所示：
HTML
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
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }
回答by walmik
You can try and style the table as well, like this:
您也可以尝试为表格设置样式，如下所示：
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
回答by Stephane Lapointe
Why not just leave it
<div align="center">It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
为什么不留下它<div align="center">据我所知，
它仍然适用于所有浏览器。我有很多旧的 html，我进入这个线程只是因为我的 NetBeans IDE 警告我这已经过时了。我的猜测是浏览器会自动转换为正确的解决方案。同样的事情
<font size="6">bla bla</font>仍然可以正常工作，并且可能会自动转换为
<span style="font-size:36px">bla bla</span>
