Проблема со списком - содержимое выровнено по вертикали, но список выровнен по горизонтали? - PullRequest
Новая
       15

Проблема со списком - содержимое выровнено по вертикали, но список выровнен по горизонтали?

0 голосов
/ 15 августа 2011

У меня есть список, к которому я применил diplay: table-cell и вертикальное выравнивание: средние стили для отображения содержимого элементов списка по центру по вертикали. Проблема в том, что сам список отображается горизонтально!

Итак, у меня правильное выравнивание содержимого отдельных элементов, но неправильное выравнивание самих элементов.

Вот пример того, что я имею в виду:

list goes horizontal!

То, что я ищу, - это то же самое, но предметы друг над другом. Каждый элемент имеет заданную ширину и высоту (100 пикселей) со стандартными полями и отступами.

Вот мои CSS и HTML: 

ul#affiliations-list {
list-style: none;
margin: 10px 0 0 0;
padding: 0 0 0 12px;
display: table;
width: 96px
}
ul#affiliations-list li{
margin: 0;
padding: 0;
width: 94px;
height: 94px;
background: #fff;
border: 1px solid #020336;
margin-bottom: 10px;
display:table-cell; 
vertical-align:middle;
position: relative

} 

<ul id="affiliations-list">
            <li><img src="be39fb67466b1a11b4989713b51a268c.jpg" width="94" height="33" alt="" /></li>
            <li><img src="297b46e52846790f9bdb71bb0c54158f.png" width="94" height="29" alt="" /></li>
            <li><img src="d20e8a119dd54a7c73d058cd333dbd71.jpg" width="93" height="94" alt="" /></li>
            <li><img src="beb10861fed07a849e36d98922304751.gif" width="94" height="68" alt="" /></li>
</ul>

Любая помощь приветствуется!

Ответы [ 2 ]

1 голос
/ 15 августа 2011

Попробуйте такую ​​структуру: 

<ul>
    <li><div>correctly aligned</div></li>
    <li><div>correctly aligned</div></li>
    ...
</ul>

<style>
    div { display: table-cell; vertical-align: middle; }
</style>

Оставьте <li> в их стиле по умолчанию, так что вы получите их в форме "столбца", а затем div позаботится о выравнивании содержимого li.

0 голосов
/ 15 августа 2011

То, что я ищу, это то же самое, но предметы друг на друга.Каждый элемент имеет заданную ширину и высоту (100 пикселей) со стандартными полями и отступами.

Вы хотите выровнять их по вертикали. Если это так, добавьте перерыв, пожалуйста.:-( Если вы хотите, чтобы они накладывались друг на друга, кажется, что слои - единственный способ пойти

...