javascript 水平居中显示一个 div 的内容：table-row
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21683697/
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
Horizontal center the content of a div with display: table-row
提问by user2752929
I'm having trouble centering the contents of a div with display: table-row.
我无法将 div 的内容与display: table-row.
Here's a Fiddler.
这是一个Fiddler。
HTML
HTML
<div class="table-row">
<div class="left-right-padding">
<ul>
<li>TEXT EXEMPLE 1:</li>
</ul>
</div>
<div class="left-right-padding">
<ul>
<li>TEXT EXEMPLE 2:</li>
</ul>
</div>
<div class="left-right-padding">
<ul>
<li>TEXT EXEMPLE 3:</li>
</ul>
</div>
<div class="clear"></div>
</div>
CSS
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
outline: none;
text-decoration: none;
zoom: 1;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clear {
clear: both
}
.table-row {
font-weight: bold;
display: table-row;
border: 1px solid #000;
}
.left-right-padding {
padding: 0 20px 0 20px;
display: table-cell;
text-align: center;
}
How can I center horizontally the content of a div .table-row?
如何将 a 的内容水平居中div .table-row？
I've tried using margin: 0 autowith width: 100%, but it did not work. Neither did using text-align: center.
我试过使用margin: 0 autowith width: 100%，但没有用。也没有使用text-align: center.
采纳答案by Diego Alves
Add a new div wrapper and put your display as tableand width: 100%.
添加一个新的 div 包装器并将您的显示放置为tableand width: 100%。
Put text-align: centerin your table-row.
放入text-align: center您的表格行。
回答by Ford
From what I'm seeing, the table-rowis being treated as an inline-blockwhich leaves you with two options.
从我所看到的，table-row被视为 an inline-block，这让您有两个选择。
Option a
Wrap the table-rowin a container div with display: tableand margin: 0 auto
选项 a用和
包裹table-row在容器 div 中display: tablemargin: 0 auto
Option b
Have table-rowuse display: tableand margin: 0 auto
选项 b
有table-row使用display: table和margin: 0 auto
Fiddle: http://jsfiddle.net/zJ48q/1/
回答by CBroe
Don't have table-rowelements hanging “in the air”, but put a table element around them – I used inline-tablehere so that the element can be centered by using text-align:centeron the parent element (body):
不要让table-row元素“悬在空中”，而是在它们周围放置一个表格元素——我inline-table在这里使用，以便元素可以通过text-align:center在父元素（主体）上使用来居中：
