CODEWITHSUNDEEP
htmlcsshtml-lists
Orahmax
Orahmax

Reputation: 2341

How to align image and unordered list horizontally?

I am trying to align an image at the right side of unordered list. So the contact info is displayed on the left side.

HTML 

<div id="contact">
            <h1>Contact Us</h1>
            <ul>
                <li>
                    <div class="icon"><img src="images/map.png" alt=""></div>
                    <div class="info"><b>Address</b></div>
                    <div class="sub-info">72 John Doe area</div>
                </li>
                <li>
                    <div class="icon"><img src="images/email.png" alt=""></div>
                    <div class="info"><b>Email</b></div>
                    <div class="sub-info">[email protected]</div>
                </li>
                <li>
                    <div class="icon"><img src="images/phone.png" alt=""></div>
                    <div class="info"><b>Phone</b></div>
                    <div class="sub-info">732-757-2923</div>
                </li>
            </ul>
            <img src="images/location.png" alt="">
</div><!-- contact -->

Below is the code where i used table alignment for list elements as shown above in the HTML code.

CSS

#contact{
    background-color: #f2f2f2;
    margin: 0 auto;
    padding: 5% 5% 5% 12.5%;
}
#contact ul{
    width: 50%;
    margin: 0;
    margin-top: 60px;
}
#contact li{
    display: table;
    margin-bottom: 50px;
}
.icon, .info, .sub-info{
    display: table-cell;
}
.info, .sub-info{
    vertical-align: middle;
}
.icon, .info{
    width: 80px;
}

Image for more clarity

enter image description here

Upvotes: 0

Views: 1893

Answers (1)

Floremin
Floremin

Reputation: 4089

Use 

display: inline-block; vertical-align: top;

on both your <ul> and <img> elements. Fiddle: http://jsfiddle.net/U7XUh/1/

You'd need to adjust a little for your specific image/icon sizes, but you get the idea.

Upvotes: 1

Related Questions