CODEWITHSUNDEEP
htmlcsshtml-lists
JoshuaBrand
JoshuaBrand

Reputation: 177

Custom bullet image position off from text

Okay so I have a list and I am using an image as the bullet but the text following the bullet sits at the bottom of the image, like so...

bullets

this is my HTML:

<div class="serviceticks">
    <ul>
        <li>Web Design</li>
        <li>HTML</li>
        <li>CSS3</li>
        <li>PHP5</li>
    <ul>
</div>

and this is my CSS

.serviceticks {
    vertical-align:middle;
    height: 100px;
    width: 95%;
}

    .serviceticks li {
        float: left;
        padding-right: 30px;
        padding-left: 10px;
        font-size: 20px;
        list-style-image: url('../images/white-tick.png');
    }

Does anyone know how I get the text to be in-line with the images?

Upvotes: 0

Views: 66

Answers (2)

neo108
neo108

Reputation: 5246

Extending from @swider answer...

The following should do it. You may have to play with the line-height value...

.serviceticks ul {
    list-style-image: url(images/white-tick.png);
}

.serviceticks li {
    vertical-align: top; 
    line-height: 50px;
}

Upvotes: 0

swider
swider

Reputation: 3444

You can use the vertical-align to change the position of the text within the line. To make it look the way you want, you'll want to use the line-height property to set the available space to the same height as the image you're using.

Try adding vertical-align: top; line-height: 35px; to the li rule

Upvotes: 1

Related Questions