Html div内不同按钮的垂直对齐

我有一个带按钮的酒吧：

语言{
位置：相对位置；
左侧填充：40px；
宽度：100%；
高度：62px；
背景颜色：青绿色；
边缘底部：10px；
}
.Type1{
位置：相对位置；
身高：100%；
宽度：100px；
字号：18px；
右边距：10px；
线高：62px；
框大小：边框框；
背景色：番茄；
边界：0；
填充：0；
}
.类型2{
位置：相对位置；
宽度：10px；
边框底部：1px纯绿色；
左边距：5px；
光标：指针；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.a{
高度：5px；
}
.b{
高度：25px；
}
c{
高度：45px；
}
博士{
高度：60px；
}

英语
法语

只需在容器上使用

显示：flex

：

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

---

我想这是我最喜欢的flex指南之一。

只需在容器上使用

display:flex

：

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

---

我想这是我最喜欢的flex指南之一。

只需添加

垂直对齐：中间到所有
按钮
元素：


语言{
位置：相对位置；
左侧填充：40px；
宽度：100%；
高度：62px；
背景颜色：青绿色；
}
.Type1{
位置：相对位置；
身高：100%；
宽度：100px；
字号：18px；
右边距：10px；
线高：62px；
框大小：边框框；
背景色：番茄；
边界：0；
填充：0；
}
.类型2{
位置：相对位置；
宽度：10px；
边框底部：1px纯绿色；
左边距：5px；
光标：指针；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.a{
高度：5px；
}
.b{
高度：25px；
}
c{
高度：45px；
}
博士{
高度：60px；
}
钮扣{
垂直对齐：中间对齐；
}

英语
法语
只需添加
垂直对齐：中间到所有
按钮
元素：


语言{
位置：相对位置；
左侧填充：40px；
宽度：100%；
高度：62px；
背景颜色：青绿色；
}
.Type1{
位置：相对位置；
身高：100%；
宽度：100px；
字号：18px；
右边距：10px；
线高：62px；
框大小：边框框；
背景色：番茄；
边界：0；
填充：0；
}
.类型2{
位置：相对位置；
宽度：10px；
边框底部：1px纯绿色；
左边距：5px；
光标：指针；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.a{
高度：5px；
}
.b{
高度：25px；
}
c{
高度：45px；
}
博士{
高度：60px；
}
钮扣{
垂直对齐：中间对齐；
}

英语
法语
将垂直对齐添加到Type1类

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

将垂直对齐添加到Type1类

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

将以下行添加到类型1类的代码中

vertical-align: middle;

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

CSS代码应该是这样的

vertical-align: middle;

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


语言{
位置：相对位置；
左侧填充：40px；
宽度：100%；
高度：62px；
背景颜色：青绿色；
}
.Type1{
位置：相对位置；
身高：100%；
宽度：100px；
字号：18px；
右边距：10px；
线高：62px；
框大小：边框框；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.类型2{
位置：相对位置；
宽度：10px；
边框底部：1px纯绿色；
左边距：5px；
光标：指针；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.a{
高度：5px；
}
.b{
高度：25px；
}
c{
高度：45px；
}
博士{
高度：60px；
}

英语
法语
在类型1类的代码中添加以下行

vertical-align: middle;

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

CSS代码应该是这样的

vertical-align: middle;

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


语言{
位置：相对位置；
左侧填充：40px；
宽度：100%；
高度：62px；
背景颜色：青绿色；
}
.Type1{
位置：相对位置；
身高：100%；
宽度：100px；
字号：18px；
右边距：10px；
线高：62px；
框大小：边框框；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.类型2{
位置：相对位置；
宽度：10px；
边框底部：1px纯绿色；
左边距：5px；
光标：指针；
背景色：番茄；
边界：0；
填充：0；
垂直对齐：中间对齐；
}
.a{
高度：5px；
}
.b{
高度：25px；
}
c{
高度：45px；
}
博士{
高度：60px；
}

英语
法语
问题是你没有考虑线的高度。
事实上，我会用em做所有事情，这是一个跨平台、多屏幕的解决方案。
下面是我的结果（每个元素都有position:relative；还应该有float:left）：


每个有css的元素：“position:relative；”也应该有float:left；
那么em和%（见FIDLE）中的解决方案将用于块：

问题是你没有考虑线的高度。
事实上，我会用em做所有事情，这是一个跨平台、多屏幕的解决方案。
下面是我的结果（每个元素都有position:relative；还应该有float:left）：


每个有css的元素：“position:relative；”也应该有float:left；
那么em和%（见FIDLE）中的解决方案将用于块：

非常感谢。我在试着避开flexbox，j