HTML Image not Centering Vertically

Question

In

<!DOCTYPE html>
<html>

<title> 51 Pegasi Studios </title>
<link rel="icon" href="file:///D:/Files/51PEGASI/icon.png">

<head>
<style>
.topnav {
 position: sticky;
 font-family: 'Roboto', sans-serif;
 background-color: black;
    overflow: hidden;
 margin-left: 0%;
 margin-right: 0%;
 color: white;
 padding-right: 15%;
 padding-left: 15%;
 width: 50;
 height: 50;
}

.topnav a {
 transition: text 0.15s ease-in-out;
    float: left;
    color: #f2f2f2;
    padding: 18px 18px;
    text-decoration: none;
    font-size: 20px;
}

.topnav a:hover {
 color: #977DA0;
}

.topnav a.active {
    color: white; 
}
</style>
</head>


<body>

<div class="topnav">
  <a style="text-align:left" href=""><img src="pegasiLeft.png" height="15%" width="15%" alt="51 Pegasi logo"></a>
  <a style="float:right;" class="active" href="#home"><b>HOME</b></a>
  <a style="float:right;" href="#about"><b>ABOUT</b></a>
  <a style="float:right;" href="#gamedesign"><b>GAME DESIGN</b></a>
  <a style="float:right;" href="#gamedev"><b>GAME DEV</b></a>
  <a style="float:right;" href="#programming"><b>PROGRAMMING</b></a>
  <a style="float:right;" href="#music"><b>MUSIC</b></a>
  
</div>

</body>

</html>

I want the image to be centered vertically, similar to the text buttons, on the same line as them. I've tried messing around with different alignments and such, but to no success. I'm assuming there's a way to go about doing it without having to use a different method than I did with the text.

This is what it looks like in practice.

score 0 · Accepted Answer · answered Mar 02 '18 at 04:54

You can use flexbox and the property align-items: center to vertically center the content of the menu.

You won't need to use float if using flexbox. To space the menu items from your logo, add margin-right: auto to the logo.

I've simplified your code for the demo below, and removed a few errors. (.topnav width and height need units, transition 'text' is not a property)

.topnav {
  position: sticky;
  font-family: 'Roboto', sans-serif;
  background-color: black;
  color: white;
  
  /*padding: 0 15%;*/
  display: flex;
  align-items: center;
}

.logo {
  margin-right: auto;
}

.topnav a {
  transition: color 0.15s ease-in-out;
  color: #f2f2f2;
  padding: 18px;
  text-decoration: none;
  font-size: 10px;
}

.topnav a:hover {
  color: #977DA0;
}

.topnav a.active {
  color: white;
}

<div class="topnav">
  <a class="logo" href=""><img src="https://unsplash.it/20" alt="51 Pegasi logo"></a>
  <a class="active" href="#home">HOME</a>
  <a href="#about">ABOUT</a>
  <a href="#gamedesign">GAME DESIGN</a>
  <a href="#gamedev">GAME DEV</a>
  <a href="#programming">PROGRAMMING</a>
  <a href="#music">MUSIC</a>
</div>

score 0 · Answer 2 · answered Mar 02 '18 at 05:03

You can use CSS flexbox to make vertically center the logo & menu.

.topnav{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.navigation{
  text-align: right;
}

.navigation ul{
  margin: 0; 
  list-style: none;
}

.navigation ul li{
  display: inline-block;
}

<div class="topnav">
  <div class="logo">
    <a href="#"><img src="http://lorempicsum.com/futurama/50/50/1" alt="logo"></a>
  </div>
  <div class="navigation">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
    </ul>
  </div>
</div>

score 0 · Answer 3 · answered Mar 02 '18 at 05:14

You can accomplish this by adding display: flex on the .topnav class and removing the 15% width and height on the image tag. Finally adding align-items: center; on the .topnav class to center the image vertically.

<!DOCTYPE html>
<html>
<title> 51 Pegasi Studios </title>
<link rel="icon" href="file:///D:/Files/51PEGASI/icon.png">
<head>
 <style>
  .topnav {
   position: sticky;
   display: flex;
   align-items: center;
   font-family: 'Roboto', sans-serif;
   background-color: black;
   overflow: hidden;
   margin-left: 0%;
   margin-right: 0%;
   color: white;
   padding-right: 15%;
   padding-left: 15%;
   width: 50;
   height: 50;
  }

  .topnav a {
   transition: text 0.15s ease-in-out;
   color: #f2f2f2;
   padding: 18px 18px;
   text-decoration: none;
   font-size: 20px;
  }

  .topnav a:hover {
   color: #977DA0;
  }

  .topnav a.active {
   color: white;
  }

  .center-image {
   width: 120px;
  }
 </style>
</head>
<body>
 <div class="topnav">
  <a href=""><img class="center-image" src="https://image.ibb.co/jQbTAx/Screenshot_2018_03_01_23_57_22.png" alt="51 Pegasi logo"></a>
  <a style="float:right;" class="active" href="#home"><b>HOME</b></a>
  <a style="float:right;" href="#about"><b>ABOUT</b></a>
  <a style="float:right;" href="#gamedesign"><b>GAME DESIGN</b></a>
  <a style="float:right;" href="#gamedev"><b>GAME DEV</b></a>
  <a style="float:right;" href="#programming"><b>PROGRAMMING</b></a>
  <a style="float:right;" href="#music"><b>MUSIC</b></a>
 </div>
</body>
</html>

score 0 · Answer 4 · answered Mar 02 '18 at 05:38

You could also think about "Bootstrap4" which offers excellent browser support for your styling. With BS4 you only need to add the corresponding classes to your HTML and it will work in most browsers without problems. Your code could look like:

<!doctype html>
<html lang="en" style="overflow: hidden">
 <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 </head>
 <body>
  <div class="container d-flex align-items-center" style="background-color: #0FF; height: 150px;">
   <div class="container">
    <a class="float-left" href=""><img src="https://unsplash.it/20" alt="51 Pegasi logo"></a>
    <a class="float-left" href="#home">HOME</a>
    <a class="float-right pr-2" href="#about">ABOUT</a>
    <a class="float-right pr-2" href="#gamedesign">GAME DESIGN</a>
    <a class="float-right pr-2" href="#gamedev">GAME DEV</a>
    <a class="float-right pr-2" href="#programming">PROGRAMMING</a>
    <a class="float-right" href="#music">MUSIC</a>
   </div>
  </div>
 </body>
</html>

HTML Image not Centering Vertically

4 Answers4