Question

所以我在div里面有一个div。子div中的内容需要左对齐，子div本身需要在父div中居中。我的问题是，我不能将子div只作为其内容的宽度，所以我可以将它居中。它不断延长父div的长度。我尝试过显示：内联块，内联，表格。什么都没有用。如何让子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

Answer 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%;
}

我希望这很有帮助。

div不符合其内容

1 个答案: