Easy HTML/CSS Help. Can't seem to figure this out!

Question

I'm trying to line up some text between two images on its left and right. Why isn't it moving up?

<img src="srchere" /><span style="padding-bottom:10px;">Some text right here!</span><img src="srchere" />

The two images are larger than the text, so it looks like the text isn't aligned and is positioned lower than the images. How do I raise the text up? The code I have above doesn't seem to move the text up.

Thanks.

Answer 1

Try adding align="absmiddle" attribute to the images.

Answer 2

If you want images to vertically align with text, you need to use:

vertical-align: middle

Note that your padding-bottom might throw this off a little.

Also, if you are not already doing it, you should use an external stylesheet instead of inline CSS.

Answer 3

By "up" I assume you mean aligned to the top of the container box. This should do what you want:

<img style="float: left;" src="...">
<p style="float: left;">Filler text. Filler text. Filler text.</p>
<img style="float: right;" src="...">

Answer 4

If you want to adjust manually, this can do

<span style="vertical-align:100%"> 

increase/decrease the percentage until u satisfy

Answer 5

I'd recommend you wrap it in a div, and float images to each side.

CSS:

<style type=text/css>
div {
    display:block;
    height:30px;
    clear: both;
}
img.l, img.r{
    display:inline-block;
    height:30px;
    width:30px;
}
img.l{
    float:left;
}
img.r{
    float:right;
}
span {
    display:inline-block;
}
</style>

HTML:

<div>
<img src="srchere" class="l"/>
<span>Some text right here!</span>
<img src="srchere" class="r"/>
</div>

or, alternatively, if you're one of those people who hate floats you could do this:

<style type=text/css>
div {
    display:block;
}
img.l, img.r{
    vertical-align:top;
    display:inline-block;
    height:30px;
    width:30px;
}

span {
    vertical-align:top;
    display:inline-block;
}
</style>