sdbbs sdbbs - 7 months ago 10
HTML Question

Vertically aligning span with text, select, and span with image on single line?

I've seen similar questions like How to vertically align spans with text and image, but for the life of me, I cannot see what I'm doing wrong.

Here is my minimal example as a whole html page:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
font: 16px serif;
}
#mydiv span {
vertical-align: bottom;
}
#mydiv select {
font: 16px serif;
text-decoration: none;
background-color: #FFF;
vertical-align: bottom;
}
</style>
<script type="text/javascript">
</script>
</head>

<body>
<h1>Hello World!</h1>

<div id="mydiv">
<span>Testing 1:</span>
<select id="myselect"><option value="1">[My option]</option></select>
<span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>
</div>

</body>
</html>


I would want, the span with text, the select next to it, and the span with image to be vertically aligned - middle or bottom. However, what I get is in Firefox 43 is this:

ff-clean

Somehow, the span/text, the select and the span/image do not look vertically aligned to me; so to check, here is a montage from Firefox:

ff-merged

So, how can I get these elements aligned vertically on a single line - either middle or bottom?

Answer

Ok, I came as close as I could:

ff-clear

Basically:

  • The baseline of the texts in first span and select are (nearly) aligned
  • The image span is centered vertically in respect to the select

... and this is as good as I'd have it, I guess. Somewhat strangely, there's no vertical-align: middle; anywhere in the CSS to get this output? Here is an overlay from the visual inspect in Firefox:

ff-merged.png

... and here is the code:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
body {
    font: 16px serif;
}
#mydiv span#s1 {
    vertical-align: baseline;
    line-height: 1.25em;
    display: inline-block;
}
#mydiv span#s2 {
    vertical-align: baseline;
    line-height: 1.25em;
    display: inline-block;
}
#mydiv span img {
    vertical-align: sub;
  line-height: 1em;
}
#mydiv select {
    font: 16px serif;
    line-height: 1.25em;
    display: inline-block;
    text-decoration: none;
    background-color: #FFF;
    vertical-align: baseline;
    border: 2px solid gray;
    padding: 0;
    margin: 0;
}
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <h1>Hello World!</h1>

  <div id="mydiv">
    <span id="s1">Testing 1:</span>
    <select id="myselect"><option value="1">[My option]</option></select>
    <span id="s2"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>
  </div>

</body>
</html>

If a better answer than this appears, I'll re-accept it ...

Comments