Vertically align text next to an image?

sam_58249 0
Viewed 1498349

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

vertical-alignment alignment css html
26 Answers

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

Tested in FF3.

Now you can use flexbox for this type of layout.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

Michael_Haren_290

Here are some simple techniques for vertical-align:

One-line vertical-align:middle

This one is easy: set the line-height of the text element to equal that of the container

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Multiple-lines vertical-align:bottom

Absolutely position an inner div relative to its container

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Multiple-lines vertical-align:middle

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

If you must support ancient versions of IE <= 7

In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Variable container height vertical-align:middle

This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)

Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:

position: relative;
top: 50%;
transform: translateY(-50%);
ALassek_12490

Because you have to set the line-height to the height of the div for this to work

Ikke_202610 
background:url(../images/red_bullet.jpg) left 3px no-repeat;

I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.

user_12635710

Using flex property in css.

To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.

div{
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Using table-cell in css.

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

user_133686580 

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

user_166474530

Display flex with align-items: center; is the best way for vertically align the items

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>it works.</span>
</div>

user_163116420

Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>
user_5587240

In 2022 and with nearly 96% unprefixed browser support, I'm surprised no one has suggested the use of a grid layout.

In this JSFiddle, 3 lines are all that are necessary to achieve the OP's objective (but multiple alignments are presented for comparison):

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

An additional UI nicety would include the optional use of the gap property, which enables modulation of the space between each grid-item within the parent grid container (div).

Advantages of grid layout

  1. Easy vertical AND horizontal alignment of grid-items
  2. Modulation of space between grid-items
  3. Any size image (using min-content) and text length (one line using max-content or wrapped (not shown in fiddle) using min-content) would work - no need to hard-code the image dimensions in the CSS (both usages demonstrated in the demonstrated in JSFiddle)
  4. Modern approach

Disadvantages of grid layout

  1. Older browser support is more challenging
  2. Grid layouts generally require more experienced developers to implement properly - not as simple as block/inline-block display
user_98586530 
<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>
user_21592490

You probably want this:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

As others have suggested, try vertical-align on the image:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS isn't annoying. You just don't read the documentation. ;P

user_399920
Related