中心对齐div与内联

2018-06-27 01:35:31

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

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

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

顺便说一句，我想知道是否有可能用CSS做这样的事情，而不是用jQuery或JavaScript。

给父元素text-align: center

有关text-align的更多信息，请通过此链接

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

检查jsFiddle演示。

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

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

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

http://jsfiddle.net/ExplosionPIlls/te4es/

链接地址: http://www.djcxy.com/p/75671.html