Итак, у меня есть div внутри 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%;
}
EDIT: Вот простая схема того, что я хочу, чтобы это выглядело как: Diagram
[https://jsfiddle.net/tjbaezid/s9x09xna/2/] ary вы похожи на этот? –
Я помещаю ваш код в код: http://codepen.io/anon/pen/RGrWJm Он выглядит точно так, как вы описываете желаемый результат (?) – Johannes
@MostafaBaezid При открытии этого кода-runner [jsfiddle.net/tjbaezid/ s9x09xna/2]. Вы видите, что ширина дочернего div (красный div) настолько же широка, как и его родительский div (черный div). Мне нужно, чтобы дочерний div был таким же широким, как его содержимое, и был сосредоточен внутри родителя, в то же время выравнивая изображения внутри него слева. Я имею в виду? –