Align text with image

[csosa]

Hi I want to align my text with the paper image on the side but not sure how…like align center not bottom like this…

<ul id="LN" style="list-style-type: none;margin-left:-50px;">
                        <li><img style="width:22px;height:22px;" src="images/paper.png">&nbsp;<a class="LN"  href="pdf/RM.pdf">Risk Management</a></li>
                        <li><img style="width:22px;height:22px;" src="images/paper.png">&nbsp;<a class="LN"  href="pdf/PD.pdf">Prevent Damage</a></li>     
                    </ul>

[RyanReese]

@csosa

<ul id=“LN” style=“list-style-type: none;margin-left:-50px;”>
<li><img style=“width:22px;height:22px;” src=“images/paper.png”> <a class=“LN” href=“pdf/RM.pdf”>Risk Management</a></li>
<li><img style=“width:22px;height:22px;” src=“images/paper.png”> <a class=“LN” href=“pdf/PD.pdf”>Prevent Damage</a></li>
</ul>

Set vertical-align:middle; on the <img>

[csosa]

hehe I was trying to use vertial-align:center; but middle worked thanks.

[TechnoBear]

Slightly off-topic, but why are you using this?

<img style="width:22px;height:22px;" src="images/paper.png">

Either declare the image dimensions in your style sheet, or just use the normal HTML format:

<img width="22" height="22" src="images/paper.png">

(And you should, of course, also add alt="" to indicate to screenreaders that it’s purely decorative and prevent them reading out the filename or whatever instead.)

[csosa]

@TechnoBear

<img width=“22” height=“22” src=“images/paper.png”>

whoops ill do that.

[RyanReese]

@TechnoBear

Either declare the image dimensions in your style sheet, or just use the normal HTML format:

The CSS doesn’t matter that much but the HTML width/height attributes in the HTML tells the browser what space to reserve for the image while it loads. IIRC anyway.

[csosa]

Thanks.