Remove vertical space between two elements

Question

I have the following HTML and my objective is to show the image and the text in the same line, vertically and horizontally aligned. Here is the CSS I used:

* {
    background-color: #1B262C;
    margin: 0px;
    padding: 0px;
}

.logo {
    border: 3px solid green;
    text-align: center;
}

.logo-img {
    display: inline-block;
    border: 3px solid blue;
    vertical-align: middle;
}

.logo-text {
    display: inline-block;
    font-size: 96px;
    border: 3px solid blue;
}

<!DOCTYPE html>
<html>
    <head>(...)</head>
    <body>
        <header class="logo">
            <img src="logo.png" alt="Sigma logo" class="logo-img">
            <h1 class="logo-text">Sigma</h1>
        </header>
    </body>
</html>

The borders are for visualization only. With these files, the following output is produced:

Output

Please note the strange vertical space that appears above the image. How can I remove it, and effectively align the text and the image?

Does this answer your question? [How to Vertically Center an img in the logo in this navigation-bar?](https://stackoverflow.com/questions/44530809/how-to-vertically-center-an-img-in-the-logo-in-this-navigation-bar) — MarLMazo, Feb 17 '21 at 04:05

score 1 · Answer 1 · answered Feb 17 '21 at 04:04

display: flex is a good solution for this type of problem. There is a good intro to flexbox over at CSS Tricks.

.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

The specifics of why your current CSS doesn't work have to do with some other issues, including probably default CSS applied by your browser to elements of type img and h1. But, flexbox is widely supported by browsers, and is a good approach for situations like these.

tcf01 · Answer 2 · 2021-02-17T05:05:57.937

0

You can try to use display: flex for the alignment. Adding flex makes the logo class into a flex-container.

.logo{
 display: flex;
 align-items: center  
 justify-content: center
}

.logo-img {
    border: 3px solid blue;
    
}

.logo-text {
    font-size: 96px;
    border: 3px solid blue;
}

edited Feb 17 '21 at 05:05

answered Feb 17 '21 at 03:58

tcf01

1,699
1
9
24

score 0 · Accepted Answer · edited Mar 04 '21 at 17:45

Provide vertical-align: middle; for logo-text class. If you are going for inline-block display, you have to set vertical alignment explicitly for each child.

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

* {
    background-color: #1B262C;
    margin: 0px;
    padding: 0px;
}

.logo {
    border: 3px solid green;
    text-align: center;
}

.logo-img {
    display: inline-block;
    border: 3px solid blue;
    vertical-align: middle;
    height: 100px;
}

.logo-text {
    vertical-align: middle;
    display: inline-block;
    font-size: 96px;
    border: 3px solid blue;
}

<header class="logo">
    <img src="https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-2-512.png" alt="Sigma logo" class="logo-img">
    <h1 class="logo-text">Sigma</h1>
</header>

Remove vertical space between two elements

3 Answers3