将内联块 DIV 居中答案

【问题标题】：Centering An Inline-Block DIV将内联块 DIV 居中
【发布时间】：2012-04-25 07:28:59
【问题描述】：

有人知道如何将显示设置为 inline-block 的 DIV 居中对齐吗？

我无法将显示设置为阻止，因为我有需要重复的背景图像，并且需要根据内容展开。它位于父 div 内部，其中宽度更大。

总而言之。有没有人可以将 div 与设置为 inline-block 的显示对齐居中？

不，文本对齐：居中；不起作用，margin: 0 auto 也不起作用；

jsFiddle: http://jsfiddle.net/HkvzM/

谢谢！

【问题讨论】：

"我无法将显示设置为阻止，因为我有需要重复的背景图像，并且需要根据内容展开。"对于块元素，这两种方法都是可能的。向我们展示您正在尝试做的事情的示例。
@ceejayoz：我用 jsFiddle 的链接更新了我的问题。谢谢！

标签： html xhtml alignment css

【解决方案1】：

我从所有这些（许多、大量、大量）答案中得到的是，您无法使用内联样式调用将块居中。它必须是一个已定义的类。这是金丝雀：

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

尝试在 Canvas LMS 内居中放置视频帧。必须通过他们的白名单测试。

【讨论】：

【解决方案2】：

text-align:center 在父 div 上，就可以解决问题。
来源：CSS center display inline block?

【讨论】：

【解决方案3】：

你不能用

使元素居中

display:inline

您可能必须通过使用 jQuery 或 JavaScript 来解决问题。您可以使用 CSS 进行一些近似居中，如果文本的长度没有太大变化，这将起作用。像这样Demo

<div id="out">
    <a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>
</div>

#out{
 padding:0 50px;   
}

【讨论】：

【解决方案4】：

您好，您可以像这样给父文本对齐中心而不是子节点

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

<div>
<a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>    
</div>

现场演示http://jsfiddle.net/rohitazad/HkvzM/15/

【讨论】：

【解决方案5】：

试试这个：

margin: 0 auto;

或者text-align: center;在父<div>...

【讨论】：

父 Div 不能有任何一个，因为它是一个浮动元素，并且其中的元素不能通过中心对齐。
实际上，float 并不能阻止这种情况的发生。 text-align:center 在这里工作：jsfiddle.net/HkvzM/3 它位于浮动 div 中。问题是你必须给父母一个宽度。我认为我们需要有关父结构的更多信息来确定您需要什么。
边距：0 自动；在内联块 div 上似乎不起作用。