Question

我有一个带有一些按钮的栏：

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

第一个按钮填充垂直空间，我希望第二个按钮垂直居中。但我不能。

这与按钮内部的文本和垂直对齐有关，文本按钮有不同的垂直对齐，没有它们。

有没有人知道如何垂直居中第二个，有或没有文字，而不使用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

将Vertical-align添加到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;
}

Answer 3

只需在容器上使用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;
}

我认为this是我最喜欢的导游指南之一。

Answer 4

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

vertical-align: middle;

CSS代码应该是这样的;

.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

问题是你没有考虑到线高。实际上，我会使用em和％做所有事情，这是跨平台和多屏幕解决方案。这是我的结果（每个元素都有位置：相对;也应该有浮动：左）：

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

每个有css的元素：“position：relative;”也应该有浮动：左; 那么em和％中的解决方案（参见小提琴）将用于块： 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;
}

垂直对齐div内的不同按钮

5 个答案: