CSS fix alignment with Button and image

Question

I am a beginner in CSS so kindly ignore if this question is too silly. I need your suggestions for fixing an alignment problem. I have a set of buttons along with a glyph icon image. The buttons are equally spaced and aligned (height: 18px) while the image doesn't fit (height: 18px). I tried with padding-top and that doesn't help.

<html>
<head>
  <style type="text/css">
    #glyphImage {
width:16px;
height:18px;
}
    </style>
  </head>
<body>
<table>
<tr>
    <td></td>
    <td>
     <input type="button" value="p">
 <input type="button" value="c"><input type="button" value="/c">
 <input type="button" value="s"><input type="button" value="/s">
 <input type="button" value="l"> <input type="button" value="u">
 <input type="button" value="t"><input type="button" value="tr">
   <img id="glyphImage" src="si-glyph-image.svg">
    </td></tr>
    </table>
</body>
</html>

Alignment issue:

Bryce Howitson · Accepted Answer · 2019-03-30T17:42:48.203

Well, there are several ways you can go about this.

Option #1

Since you're using a table and those are pretty good at vertical alignment, you can make use of the defaults.

In HTML <td valign="middle"></td>

OR in CSS

td {
  vertical-align: middle;
}

Option #2

Use CSS Flexbox (this can be done just inside a div you wouldn't need the table) Either use your td or a container element of some kind (div, span etc)

td {
   display:flex;
   flex-direction: column;
   justify-content: center;
}

In either case, I would give EACH element its own td if you're going to stick with the table concept. That will give you a lot more control.

<tr>
  <td><input type="button" value="p"></td>
  <td><input type="button" value="c"></td>
  <td><input type="button" value="/c"></td>
  <td><input type="button" value="s"></td>
  <td><input type="button" value="/s"></td>
  <td><input type="button" value="l"></td>
  <td><input type="button" value="u"></td>
  <td><input type="button" value="t"></td>
  <td><input type="button" value="tr"></td>
  <td><img id="glyphImage" src="si-glyph-image.svg"></td>
</tr>

Thanks for your suggestions, will give it a try and accept the answer. — javapedia.net, Mar 30 '19 at 17:49

godfather · Answer 2 · 2019-03-30T18:03:22.133

if you dont want to use flex target the image and set vertical-align:middle or bottom as you want to align it

<html>
<head>
  <style type="text/css">
    #glyphImage {
width:16px;
height:18px;
vertical-align:middle;
}
    </style>
  </head>
<body>
<table>
<tr>
    <td></td>
    <td>
     <input type="button" value="p">
 <input type="button" value="c"><input type="button" value="/c">
 <input type="button" value="s"><input type="button" value="/s">
 <input type="button" value="l"> <input type="button" value="u">
 <input type="button" value="t"><input type="button" value="tr">
   <img id="glyphImage" src="https://images.unsplash.com/photo-1514214246283-d427a95c5d2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=673&q=80">
    </td></tr>
    </table>
</body>
</html>

Thanks! it works fine in chrome and not in Safari browser. – javapedia.net Mar 30 '19 at 17:49 — javapedia.net, Mar 30 '19 at 17:49
You'll need to use vendor prefixes: eg `-webkit-property` – Bryce Howitson Mar 30 '19 at 17:52 — Bryce Howitson, Mar 30 '19 at 17:52

score 0 · Answer 3 · answered Mar 30 '19 at 17:34

May not be the most elegant solution but you could use negative margin to align the items. So if the img tag had a margin-bottom: -4px for example the image would line up with the buttons.

Seemingly negative margins get a bad rep but there are some valid points in this post about why it's okay to use them.

CSS fix alignment with Button and image

3 Answers3