Aligning logo, icon, text, and selection box. Should be extremely easy, but..?

[Bram2]

Sorry if this sounds like a dumbass newbie question. I'm getting crazy or something, but somehow I can't get this simple thing to work:

1. In general, how do I center text and/or images vertically?

2. How would I do a top bar with a logo on the left, and an icon + text + combobox (small form with one select item) on the right, all vertically centered to eachother?
Like this:


And with "how", I mean: how with proper html/css :)

[Dormilich]

one possibility (maybe not the best, but working):

<div style="border: 1px solid black;">
    <img src="img1.png" alt="large img" width="50" height="100">
    <span style="line-height: 100px; float: right;">
        <img src="img2.png" alt="small img" width="20" height="20" style="vertical-align: middle;">
        some text
        <input type="radio"  style="vertical-align: middle;">
    </span>
</div>

the basic trick is to to apply vertical-align to an inline element that determins the height of the container

note:
inline style only for demo, proper CSS belongs in a css file. (where you can simplify it a bit)

regards

[Bram2]

Thanks, that seems to be somewhat in the right direction!
But two problems arise:

1. The radiobutton thing appears below (outside) the container
(tested with Firefox and IE7, in Opera it looks OK)

2. When putting actual <form> and </form> tags around the input thing, it gets messed up even more :(
(it seems to enforce a linebreak before form or something, but I really need form tags to have that input thing actually do something)

Any suggestions how to overcome that?

[drhowarddrfine]

vertical alignment is different with input elements because there is no padding and only the margin matters.

[Dormilich]

it depends on the actual code.

- <form> is not allowed inside <span>
- float the big image left and the <span> right should render OK (tried FF)

regards

[Bram2]

it depends on the actual code.

- <form> is not allowed inside <span>

Ah thanks, never knew that :)
But I really need <form> tags to get the selection thing actually working. So do you know any other way (other than form inside span, I mean) to get that working?

- float the big image left and the <span> right should render OK (tried FF)

Are you sure? I just tried it here and although the span part and logo are no at the same height, it seems they're now *both* below the div... What used to be a black border is now a single black line above everything.

When I change the background color of body and the div, the div seems completely empty, and the images and stuff appear below it...?

[Dormilich]

Ah thanks, never knew that :)

it's always good to know where to look that up (I use SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz (german only, but you might get the info though (english version suspended))

But I really need <form> tags to get the selection thing actually working. So do you know any other way (other than form inside span, I mean) to get that working?

put the <form> tags before and after the span.

Are you sure? I just tried it here and although the span part and logo are no at the same height, it seems they're now *both* below the div... What used to be a black border is now a single black line above everything.

yea, there's practically no content in the <div>. apply a height to the <div> (if you don't need the border or the background you may also omit the <div>).

// CSS
#top {
    border: 1px solid black; 
    height: 150px;
// add padding, margin to your liking
}
#left {
    float: left; 
    line-height: 150px;
}
#right {
    float:right; 
    line-height:150px;
}
#left *, #right * {
    vertical-align: middle;
}

// HTML
maybe some text
<form>
<div id="top">
<span id="left">
    <img width="100" height="100">&nbsp; 
// you need a character to align the image in FF
</span>
<span id="right">
    <img width="50" height="50">
    text
    <input type="radio"> // might need small corrections
</span>
</div>
and some more text
</form>

[Dormilich]

found an article about clearing floats with CSS (so the height property on div is not necessary): Clearing a float container without source markup