CODEWITHSUNDEEP
htmlcssstyling
user8925307
user8925307

Reputation:

Vertical align of different buttons inside a div

I have a bar with some buttons:

    .Languages {
      position: relative;
      padding-left: 40px;
      width: 100%;
      height: 62px;
      background-color: turquoise;
      margin-bottom: 10px;
    }
    .Type1 {
      position: relative;
      height: 100%;
      width: 100px;
      font-size: 18px;
      margin-right: 10px;
      line-height: 62px;
      box-sizing: border-box;
      background-color: tomato;
      border: 0;
      padding: 0;
    }
    
    .Type2 {
      position: relative;
      width: 10px;
      border-bottom: 1px solid green;
      margin-left: 5px;
      cursor: pointer;
      background-color: tomato;
      border: 0;
      padding: 0;
      vertical-align: middle;
    }
    
    .a {
      height: 5px;
    }
    
    .b {
      height: 25px;
    }
    
    .c {
      height: 45px;
    }
    
    .d {
      height: 60px;
    }
 

<div class="Languages">
    <button class="Type1" data-id="1">English</button>
    <button class="Type1" data-id="1">French</button>
    <button class="Type2 a"></button>
    <button class="Type2 b"></button>
    <button class="Type2 c"></button>
    <button class="Type2 d"></button>
</div>  

 <div class="Languages">
    <button class="Type1" data-id="1"></button>
    <button class="Type1" data-id="1"></button>
    <button class="Type2 a"></button>
    <button class="Type2 b"></button>
    <button class="Type2 c"></button>
    <button class="Type2 d"></button>
</div>

The first buttons fill the vertical space, and I want the second ones to be vertically centered. But I can't.

This has something to do with the text inside the buttons and the vertical align, with texts the buttons have a different vertical align that without them.

Does anyone know how to center vertically the second ones, with or without text, and without using flexbox?

Upvotes: 0

Views: 1323

Answers (5)

Eugene Kapustin
Eugene Kapustin

Reputation: 166

The thing is you're not taking into account the line heights. Actually, I would do everything using em and %, this is cross-platform and multi-screen solution. Here's my result (every element that has position: relative; should also have float:left):

https://jsfiddle.net/525n53y8/ 

    .a {
  height: .45em;
  margin-top: 1.575em
}

.b {
  height: .9em;
  margin-top: 1.4em;
}

.c {
  height: 1.8em;
  margin-top: .9em;
}

.d {
  height: 3.6em;
}

every element that has css: "position: relative;" should also have float:left; then the solution in em and % (see fiddle) would be for blocks: https://jsfiddle.net/k3e84v0x/

    .a {
  height: 5px;
  margin-top: 28.5px;
}

.b {
  height: 25px;
  margin-top: 18.5px;
}

.c {
  height: 45px;
  margin-top: 8.5px;
}

.d {
  height: 62px;
}

Upvotes: 0

sercan
sercan

Reputation: 361

Add the following line to the code of type 1 class;

vertical-align: middle;

CSS code should be like this;

.Type1 {
  position: relative;
  height: 100%;
  width: 100px;
  font-size: 18px;
  margin-right: 10px;
  line-height: 62px;
  box-sizing: border-box;
  background-color: tomato;
  border: 0;
  padding: 0;
  vertical-align: middle;
}


    .Languages {
      position: relative;
      padding-left: 40px;
      width: 100%;
      height: 62px;
      background-color: turquoise;
    }
    .Type1 {
      position: relative;
      height: 100%;
      width: 100px;
      font-size: 18px;
      margin-right: 10px;
      line-height: 62px;
      box-sizing: border-box;
      background-color: tomato;
      border: 0;
      padding: 0;
      vertical-align: middle;
    }
    
    .Type2 {
      position: relative;
      width: 10px;
      border-bottom: 1px solid green;
      margin-left: 5px;
      cursor: pointer;
      background-color: tomato;
      border: 0;
      padding: 0;
      vertical-align: middle;
    }
    
    .a {
      height: 5px;
    }
    
    .b {
      height: 25px;
    }
    
    .c {
      height: 45px;
    }
    
    .d {
      height: 60px;
    }
<div class="Languages">
        <button class="Type1" data-id="1">English</button>
        <button class="Type1" data-id="1">French</button>
        <button class="Type2 a"></button>
        <button class="Type2 b"></button>
        <button class="Type2 c"></button>
        <button class="Type2 d"></button>
</div>

Upvotes: 0

VIJAYABAL DHANAPAL
VIJAYABAL DHANAPAL

Reputation: 564

Add vertical-align to Type1 class. 

.Type1 {
  position: relative;
  height: 100%;
  width: 100px;
  font-size: 18px;
  margin-right: 10px;
  line-height: 62px;
  box-sizing: border-box;
  background-color: tomato;
  border: 0;
  padding: 0;
    vertical-align: middle;
}

Upvotes: 1

Johannes
Johannes

Reputation: 67798

Just add vertical-align: middle; to all button elements:

.Languages {
  position: relative;
  padding-left: 40px;
  width: 100%;
  height: 62px;
  background-color: turquoise;
}

.Type1 {
  position: relative;
  height: 100%;
  width: 100px;
  font-size: 18px;
  margin-right: 10px;
  line-height: 62px;
  box-sizing: border-box;
  background-color: tomato;
  border: 0;
  padding: 0;
}

.Type2 {
  position: relative;
  width: 10px;
  border-bottom: 1px solid green;
  margin-left: 5px;
  cursor: pointer;
  background-color: tomato;
  border: 0;
  padding: 0;
  vertical-align: middle;
}

.a {
  height: 5px;
}

.b {
  height: 25px;
}

.c {
  height: 45px;
}

.d {
  height: 60px;
}

button {
  vertical-align: middle;
}
<div class="Languages">
  <button class="Type1" data-id="1">English</button>
  <button class="Type1" data-id="1">French</button>
  <button class="Type2 a"></button>
  <button class="Type2 b"></button>
  <button class="Type2 c"></button>
  <button class="Type2 d"></button>
</div>

Upvotes: 1

legomolina
legomolina

Reputation: 1093

Just use display: flex on container:

.Languages {
  position: relative;
  padding-left: 40px;
  width: 100%;
  height: 62px;
  background-color: turquoise;

  /*Use flex and its property align-items to vertical-center*/
  display: flex;
  align-items: center;
}

I think this is one of my favourite flex guide.

Upvotes: 1

Related Questions