8

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

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

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

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

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

谢谢！

4

5 回答 5

17

尝试使用这个：

margin: 0 auto;

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

于 2012-04-12T21:41:31.857 回答
2

嗨，你可以像这样给父文本对齐中心而不是孩子

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/

于 2012-04-13T05:26:38.853 回答
1

您不能将元素居中

display:inline

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

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

#out{
 padding:0 50px;   
}
于 2012-04-13T01:25:23.883 回答
0

text-align:center 在父 div 上，将简单地做到这一点。
来源：CSS 中心显示内联块？

于 2015-06-05T11:46:38.993 回答
0

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

<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 中居中视频帧。必须通过他们的白名单测试。

于 2018-05-04T13:51:51.290 回答