CODEWITHSUNDEEP
css
acctman
acctman

Reputation: 4349

css vertical alignment, weird result

I've created a jsfiddle http://jsfiddle.net/zkLav/ showing the code in action. what's happening is the images and text alignment are step stacking and not aligning vertically. Can anyone explain why this is happening?

CSS markup:

.outList {
    display:table;
}
.outList span {
    display:table-cell;
    vertical-align:middle;
    width:10%;
}
.outList h4 {
    display:table-cell;
    vertical-align:middle;
    width:50%;
    padding-left: 10px;
}
.outList p {
    float:right;
    display:table-cell;
    vertical-align:middle;
    /*width:30%;*/
    text-align:right;
}
.outList img {
    width:100%;
}

HTML markup:

<ul>
    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Warmup</h4>
            <p>5 Minutes</p>
        </div>                             
    </a>                  
    </li> 

    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Machine Press</h4>
            <p>3 sets of</p>
        </div>                             
    </a>                  
    </li>

    <li data-theme="c">
    <a href="detail.html">
        <div class="outList">
            <span><img src="simgs/listview_chk.png" /></span>
            <h4>Lateral Pulldowns</h4>
            <p>3 sets of</p>
        </div>                             
    </a>                  
    </li>
</ul>​
​

A proper image of the problem:

enter image description here

Upvotes: 0

Views: 729

Answers (2)

Luis
Luis

Reputation: 5914

Ok, take a look at this update

Just remove the width in the next .css class:

.outList img {
    width: 100%;
}

UPDATE

For the text at the right to be fully align, remove the float:right; from the p class:

.outList p {
    float:right;
    display:table-cell;
    vertical-align:middle;
    /*width:30%;*/
    text-align:right;
}

Check this new update

Upvotes: 2

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

Get rid of the divs, you don't need them given that you have the li's.

Also, why span the img? Get rid of that too.

When you did that, put the ul as the table, the li's as the rows and then the stuff in the a as the columns.

Upvotes: 0

Related Questions