Text do not align center vertically

Question

I used all options on the web but this seems to trick me every time.

u used flex

vertical alignment

I don't want to add margin or padding.

You can comment to start the discussion.

I am just adding this bcox its asks for more explanation:

.topnav {
  
  overflow:hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  margin: 0px;
}


.topnav div {
  float: left;
  display: flex;
  color: #f2f2f2;
  font-size: 15px;
  margin:auto;
  text-align: center;
  padding-left: 10px;
  
}


.topnav div:hover {
  background-color: #ddd;
  color: black;
  margin:auto;
  position: relative;
  vertical-align: middle;
}

.topnav div.active{
   color:white;
   display:flex;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   margin:auto;
}

    <div class="topnav">
        <div class="active">Some Title</div>
        <div>Link</div>
        
    </div>

add styles to class: .topnav { display: flex; justify-content: left; align-items: center; } .topnav div remove margin: auto; and .topnav div.active remove margin: auto; this will make you align center. — Umapathi, Sep 23 '19 at 12:15

score 0 · Answer 1 · answered Sep 23 '19 at 11:43

Try this,

.topnav {
  
  overflow:hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  margin: 0px;
}


.topnav div {
  float: left;
  display: flex;
  color: #f2f2f2;
  font-size: 15px;
  margin:auto;
  padding-left: 10px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  
}


.topnav div:hover {
  background-color: #ddd;
  color: black;
  margin:auto;
  position: relative;
  vertical-align: middle;
}

.topnav div.active{
   color:white;
   display:flex;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   margin:auto;
}

    <div class="topnav">
        <div class="active">Some Title</div>
        <div>Link</div>
        
    </div>

score 0 · Answer 2 · answered Sep 23 '19 at 12:01

Just use display: inline-block, vertical-align: middle; and remove float:left

    .topnav {
      
      overflow:hidden;
      background-color: #333;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 5px;
      margin: 0px;
    }


    .topnav div {
      display: inline-block;
      color: #f2f2f2;
      font-size: 15px;
      margin:auto;
      text-align: center;
      padding-left: 10px;
      vertical-align: middle;
      
    }


    .topnav div:hover {
      background-color: #ddd;
      color: black;
      margin:auto;
      position: relative;
      vertical-align: middle;
    }

    .topnav div.active{
       color:white;
       display:inline-block;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 20px;
       margin:auto;
    }

        <div class="topnav">
            <div class="active">Some Title</div>
            <div>Link</div>
            
        </div>

Text do not align center vertically

2 Answers2