How to move a text span down a few pixels relative to an image?

Question

I have the following html:


  
  Professional Grade Technology

It comes out looking like this:

I would like to move the text span down by 2 pixels to better align it with the image. I've tried adding margin, padding, invisible border, but nothing seems to help. I've added vertical-align:bottom to the image and that kind of worked, but it moved the image too far down.

So how do I move the text 2 pixels down?

user_483779 · Answer

Consider these default factors:

is an inline level element, top/bottom padding/margin will not apply.
vertical-align is set to baseline - aligns the baseline of the element.

To center align them vertically:

Option 1:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  margin-bottom: -2px;
}


  
  Professional Grade Technology

Option 2:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  position: relative;
  bottom: -2px;
}


  
  Professional Grade Technology

Option 3:

img, span {
  display: inline-block;
  vertical-align: middle;
}

span {
  transform: translateY(2px);
}


  
  Professional Grade Technology

Option 4:

div {
  display: flex;
  align-items: center;
}

span {
  margin-left: 4px;
  margin-bottom: -2px;
}


  
  Professional Grade Technology

user_5641669 · Answer

Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px

(I applied -6px in the snippet below to make it a bit more obvious)

As an alternative, you could apply similar settings to the span to move the text instead of the image.

img {
  display: inline-block;
  position: relative;
  bottom: -6px;
}


  
  Professional Grade Technology

user_10627863 · Answer

You can use different divs and with that use the margin or padding!


  
  Professional Grade Technology


  Professional Grade Technology





#span2{
  margin-top: 2px;
}

user_10550549 · Answer

In my opinion, I suggest to append some div tags inside the logo.

By using 2 div tags within float: left, we make the 2 div is inline.

Combine display: table and display: table-cell to vertical center the height of divs.

.float-left {
  float: left;
}

.d-table {
  display: table;
  height: 32px;
}

.d-table-cell {
  display: table-cell;
}

.align-middle {
  vertical-align: middle;
}


  
    
      
        
      
  
    
  
    
      
        Professional Grade Technology

How to move a text span down a few pixels relative to an image?

4 Answers