Vertical align of different buttons inside a div

Question

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?

Answer 1

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> 

Answer 2

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;
}

Answer 3

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.

Answer 4

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> 

Answer 5

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;
}