Html 居中内联块 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10132261/
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
Centering An Inline-Block DIV
提问by Aaron Brewer
Does anybody know how to center align a DIV that has the display set to inline-block?
有人知道如何将显示设置为 inline-block 的 DIV 居中对齐吗？
I cannot set the display to block because I have a background image that needs to be repeated, and it needs to expand based on the content. It sits inside of a parent div, in which is larger when it comes to width.
我无法将显示设置为阻止，因为我有一个需要重复的背景图像，它需要根据内容展开。它位于父 div 内，在宽度方面更大。
So all in all. Does anyone have a fix to center align a div with the display set to inline-block?
所以总而言之。有没有人解决将 div 与设置为 inline-block 的显示居中对齐的方法？
And no, text-align: center; does not work, nor does margin: 0 auto;
不，文本对齐：居中；不起作用，margin: 0 auto 也不行；
jsFiddle: http://jsfiddle.net/HkvzM/
jsFiddle：http: //jsfiddle.net/HkvzM/
Thank you!
谢谢！
回答by Frederick Marcoux
Try using this:
尝试使用这个：
margin: 0 auto;
Or text-align: center;on the parent <div>...
或者text-align: center;在父<div>...
回答by Rohit Azad
Hi you can give parent text-align center not child as like this
嗨，你可以像这样给父文本对齐中心而不是孩子
Css
css
div{
text-align: center;
}
.dl{
color: #fff;
margin: 0 auto;
background: #000;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
line-height:35px;
display:inline-block;
}
HTML
HTML
<div>
<a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>
</div>
Live demo here http://jsfiddle.net/rohitazad/HkvzM/15/
回答by Hammad Khan
You can not center an element with
您不能将元素居中
display:inline
You might have to find a work around by using jQuery or JavaScript. You can do some approximate centering with CSS which will work if the text does not change that much in length. Something like this Demo
您可能需要使用 jQuery 或 JavaScript 找到解决方法。您可以使用 CSS 进行一些近似居中，如果文本的长度变化不大，这将起作用。类似这个Demo
<div id="out">
<a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>
</div>???
#out{
padding:0 50px;
}
回答by Gurjit
text-align:center on the parent div , will simply do the trick.
source : CSS center display inline block?
text-align:center 在父 div 上，将简单地做到这一点。
来源：CSS 中心显示内联块？
回答by i'Ron
What I've gotten from all of these (many, multitude, gobs of) answers is that you cannot center a block with an inline style call. It mustbe a defined class. Here's the canary:
我从所有这些（许多、大量、大量的）答案中得到的是，您不能使用内联样式调用将块居中。它必须是一个定义的类。这是金丝雀：
<div
style="font-size: 14pt; text-align: center; font-family: latoweb; font-weight: 400; display: inline-block; margin: 0 auto; width: 80%; height: auto;"
>
<a
id="media_comment_m-4JGUVJ6vm4uhihPBSiXrZGRG2Fm1a8To"
data-media_comment_type="video"
class="instructure_inline_media_comment video_comment mce-item-anchor"
data-alt=""
>
</a>
5 Quick Steps to <i>Photo Story 3</i>
</div>
Trying to center a video frame inside of Canvas LMS. Must pass their whitelist test.
尝试将视频帧置于 Canvas LMS 中。必须通过他们的白名单测试。
