Question

有人知道如何将显示设置的DIV居中对齐到内联块吗？

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

总而言之。有没有人有一个修复，以中心对齐div与显示设置为内联块？

不，text-align：center;不起作用，保证金也不起作用：0 auto;

谢谢！

Answer 1

尝试使用：

margin: 0 auto;

父text-align: center;上的<div> ...

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

Answer 3

您无法使用

居中元素

display:inline

您可能必须使用jQuery或JavaScript找到解决方法。您可以使用CSS进行近似居中，如果文本的长度变化不大，则可以使用CSS。像这样Demo

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

#out{
 padding:0 50px;   
}

Answer 4

text-align：父div上的中心，只是诀窍。
来源：CSS center display inline block?

Answer 5

我从所有这些（许多，众多，大量的）答案中得到的结论是，你无法通过内联样式调用来阻止一个块。必须是一个已定义的类。这是金丝雀：

<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内部。必须通过白名单测试。

使内联块DIV居中

5 个答案: