div 不适合其内容答案

【问题标题】：div not fitting to its contentsdiv 不适合其内容
【发布时间】：2017-02-17 14:05:59
【问题描述】：

所以我在 div 中有一个 div。子 div 中的内容需要文本左对齐，子 div 本身需要在父 div 中居中。我的问题是，我不能让子 div 仅是其内容的宽度，因此我可以将其居中。它不断拉伸父 div 的长度。我试过 display:inline-block、inline、table。没有任何工作。如何让子 div 在父级中居中，但让子 div 内容左对齐？

这是我的代码。 HTML：

<div class="gallery">
    <div class="sub_gallery">
        <a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
        <a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
        <a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
        ...
    </div>
</div>

CSS：

.gallery {
    width:100%;
    text-align:center;
}

.sub_gallery {
    padding:6px;
    overflow:auto;
    text-align:left;
    display:inline-block;
}

.image {
    display:inline-block;
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative;
    margin:6px;
}

.image img {
    position:absolute;
    top:-10000px;
    bottom:-10000px;
    left:-10000px;
    right:-10000px;
    margin:auto;
    width:100%;
}

编辑：这是我希望它看起来像的简单图表： Diagram

【问题讨论】：

[ jsfiddle.net/tjbaezid/s9x09xna/2 ] 你看起来像这个吗？？
我把你的代码放到了codepen中：codepen.io/anon/pen/RGrWJm它看起来和你描述的结果完全一样（？）
@MostafaBaezid 在打开该代码运行器 [jsfiddle.net/tjbaezid/s9x09xna/2] 时，您会看到子 div（红色 div）的宽度与其父 div（黑色分）。我需要子 div 与其内容一样宽并在父级中居中，同时将其中的图像向左对齐。我说得通吗？
@BradonThomason 根据您的图表 [jsfiddle.net/s9x09xna/3]，您可以调整结果区域的大小并检查。

标签： html css center text-align

【解决方案1】：

这个答案让事情变得完全不同，但试试吧。我很确定这会有所帮助，因为它将图像完美地集中在页面上。

HTML：

<body>
<div class="gallery">
<div class="sub_gallery">
<center>
<a href="pic1.jpg"><img class="image" src="pic1.jpg"></a>
<a href="pic1.jpg"><img class="image" src="pic1.jpg"></a>
<a href="pic1.jpg"><img class="image" src="pic1.jpg"></a>
...
</center>
</div>
</div>
</body>

CSS：

.gallery {
    width:100%;
    text-align:center;
}

.sub_gallery {
    padding:6px;
    overflow:auto;
    text-align:left;
    width:100%;
}

.image {
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative;
    margin:6px;
}

.image img {
    position:absolute;
    top:-10000px;
    bottom:-10000px;
    left:-10000px;
    right:-10000px;
    margin:auto;
    width:100%;
}

我希望这会有所帮助。

【讨论】：