0

Hello I am very new to HTML and CSS and I am trying to do a site for just learning. I just made a header and I put logo in it but I can't set it's vertical-align. Can someone explain it?

Here is HTML file:

<!DOCTYPE html>


<head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Scienitive</title>
</head>
<body>
    <div class="header">
        <div class="logo-container">
            <div class="logo">
                <a href ="index.html"><img src ="logo.png"></a>
            </div>
            <h1>Scienitive</h1>
        </div>
    </div>
</body>

Here is CSS file:

.header {
width: 100%;
height: 80px;
display: block;
background-color: #FF5733;
}
.logo-container {
height: 100%;
display: table;
float: left;
}
.logo-container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Open Sans";
font-size: 48px;

}
.logo {
display: table;
height: 80px;
}
.logo img{
width: 48px;
height: 48px;
vertical-align: middle;
display: table-cell;
}

Here is how site looks like Image

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Altugga
  • 11
  • 3
  • your img stand aside nothing to vertical iself : https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align , you should make logo `display:table-cell;vertical-align:middle;` – G-Cyrillus Nov 20 '19 at 17:09

2 Answers2

0

You actually don't want to set the display: table-cell or vertical-align: middle on the img tag directly, but instead on its container/parent:

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #FF5733;
}

.logo-container {
  height: 100%;
  display: table;
  float: left;
}

.logo-container h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  font-family: "Open Sans";
  font-size: 48px;
}

.logo {
  display: table-cell;
  vertical-align: middle;
  height: 80px;
}

.logo img {
  width: 48px;
  height: 48px;
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Scienitive</title>
</head>

<body>
  <div class="header">
    <div class="logo-container">
      <div class="logo">
        <a href="index.html"><img src="//placehold.it/48x48"></a>
      </div>
      <h1>Scienitive</h1>
    </div>
  </div>
</body>
coreyward
  • 77,547
  • 20
  • 137
  • 166
0

vertical-align is to be set on the table-cell container , which .logo should be

reminder to read about vertical-align : https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 

  .header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #FF5733;
}

.logo-container {
  height: 100%;
  display: table;
  float: left;
}

.logo-container h1 { 
  display: table-cell;
  vertical-align: middle;
  font-family: "Open Sans";
  font-size: 48px;
}

.logo {
  display: table-cell;
  vertical-align:middle;;
  height: 80px;
}

.logo img {
  width: 48px;
  height: 48px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<body>
  <div class="header">
    <div class="logo-container">
      <div class="logo">
        <a href="index.html"><img src="logo.png"></a>
      </div>
      <h1>Scienitive</h1>
    </div>
  </div>

If the area to click should only be the image, then you can consider using flex to center content or reduce the click area via pointer-events . Plese clarify if so

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129