Question

对齐具有宽度的div非常简单，只需将左右边距设置为auto即可：

<div style="margin:0px auto;">

但是在大多数情况下由于内容是动态的，我不能设置div的宽度，使用inline-block对div的宽度有所需的结果，但是中心对齐不起作用。任何人都有任何想法如何将宽度由其内容宽度定义的div居中？

顺便说一下，我想知道是否可以用css做这样的事情，而不是用jQuery或javascript。

Answer 1

<div style="text-align: center;">
    <div style="display: inline-block; background: yellow">Hello World</div>
</div>

Answer 2

提供父元素text-align: center

有关text-align的更多信息请参阅此link

Answer 3

您可以缩小包装内容的宽度。你需要两个包含元素来执行此操作，如下所示：

.outer-wrapper {
   float: right;
   position: relative;
   left: -50%;
}

.inner-wrapper {
   position: relative;
   left: 50%;
}