CODEWITHSUNDEEP
htmlcss
user3239713
user3239713

Reputation: 861

Images and text not aligning properly

jsFiddle

I have created above jsFiddle, as you can see, as soon as I add the images in, everything is a chaos. When I don't add the images, they align perfectly well. How can I fix this?

<section class="buttons">
    <ul>
        <li><a href="fotografie.html"><span><img src="http://placehold.it/60x60" /></span><span>Fotografie</span><span><img src="http://placehold.it/16x25" /></span></a><hr /></li>
        <li><a href="360.html"><span><img src="img/Icon-360.png" /></span><span>360&deg; Foto&apos;s</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
        <li><a href="plattegrond.html"><span><img src="img/Icon-plattegrond.png" /></span><span>Plattegronden</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
        <li><a href="video.html"><span><img src="img/Icon-video.png" /></span><span>Artist Impressions</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
        <li><a href="artist_impression.html"><span><img src="img/Icon-Artist-Impression.png" /></span><span>Video</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
        <li><a href="inmeten.html"><span><img src="img/Icon-Inmeten.png" /></span><span>Inmeten</span><span><img src="img/Pijltje.png" /></span></a><hr /></li>
    </ul>
</section>

With following styles:

.buttons{
    display: block;
    margin: 0 auto;
}
.buttons ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.buttons ul li{
    display: block;
    height: 60px;
    background-color: rgb(214, 55, 45);
    border-bottom: 1px white;
}
.buttons ul li a{
    color: rgb(246, 246, 246);
    text-decoration: none;
    font-weight: 400;
    line-height: 60px;
    font-size: 1.25em;
    display: block;
}
.buttons ul li a span{
    color: rgb(246, 246, 246);
    text-decoration: none;
    font-size: 1.5em;
    text-transform: uppercase;
}
.buttons ul li a span img{
    line-height: 60px;
    padding-left: 50px;
}
.buttons ul li a span:nth-child(2){
    padding-left: 100px;
}
.buttons ul li a span:last-child{
    float: right;
    position: relative;
    right: 50px;
}

Upvotes: 0

Views: 141

Answers (1)

Binita Lama
Binita Lama

Reputation: 1278

Have updated your code. Please check the link below:

http://jsfiddle.net/binita07/CSAxH/3/

.buttons{
display: block;
margin: 0 auto;
}
.buttons ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.buttons ul li{
display: block;
height: 70px;
background-color: rgb(214, 55, 45);
border-bottom: 1px white;
}
.buttons ul li a{
color: rgb(246, 246, 246);
text-decoration: none;
font-weight: 400;
line-height: 70px;
font-size: 1.25em;
display: block;
}
.buttons ul li a span{
color: rgb(246, 246, 246);
text-decoration: none;
font-size: 1.25em;
text-transform: uppercase;
}
.buttons ul li a span img{
line-height: 70px;
padding-left: 50px;
display:inline-block;
vertical-align:middle;
}
.buttons ul li a span:nth-child(2){
padding-left: 100px;
}
.buttons ul li a span:last-child{
float: right;
position: relative;
right: 50px;
}

Upvotes: 3

Related Questions