开发者

List problem - content aligned vertically but list aligned horizontally?

开发者 https://www.devze.com 2023-03-28 09:11 出处:网络
I have a list to which I\'ve applied diplay:table-cell and vertical-align:middle styles to display the list items\' contents centered vertically. Trouble is, the list itself then displays horizontally

I have a list to which I've applied diplay:table-cell and vertical-align:middle styles to display the list items' contents centered vertically. Trouble is, the list itself then displays horizontally!

So I have the correct alignment on the individual items' content, but the wrong alignment on the items themselves.

Here's an example of what I mean:

List problem - content aligned vertically but list aligned horizontally?

What I'm looking for is the same thing, but the items on top of one another. Each item has a set width and height (100px) with st开发者_开发百科andard margins and padding.

Here's my CSS and 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>

Any help appreciated!


Try a structure like this:

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

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

Leave the <li> at their default styling, so you'll get them in "column" form, and then the div takes care of the alignment of the li's content.


What I'm looking for is the same thing, but the items on top of one another. Each item has a set width and height (100px) with standard margins and padding.

YOu mean to align them vertically, If so add a break please. :-( If you want them overlapped, layers seem to be the only way to go

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号