html - 中具有固定高度的 CSS 动态垂直对齐文本

Question

我有固定高度 <div> , 因为我想要所有 <div>元素具有相同的高度。我想对齐 <div> 中的文本动态垂直居中。如果我不想添加任何标签( span 、 h1 等)是否可能？

CSS

.mydiv {
  border-radius: 25px;
  color:#c4c6c7;
  font-size:20px;
  text-align:center;
  background-color:white;
  height: 50px;
  width:40%;
  display: inline-block;
  border-style:solid;
  border-color:#c4c6c7;
  margin: 0 auto;
  overflow: hidden;
}

HTML

<div class="mydiv" id="c1" onclick="checkans(this.innerHTML)">choice 1</div>

Answer 1

既然你已经在你的元素上定义了高度，最简单的方法就是将 line-height 设置为相同数量的 px

.mydiv {
  border-radius: 25px;
  color:#c4c6c7;
  font-size:20px;
  text-align:center;
  background-color:white;
  height: 50px;
  width:40%;
  display: inline-block;
  border-style:solid;
  border-color:#c4c6c7;
  margin: 0 auto;
  overflow: hidden;
  line-height: 50px;
}

<div class="mydiv" id="c1" onclick="checkans(this.innerHTML)">choice 1</div>

其他解决方案是使用 Flexbox 并设置 align-items: center 垂直对齐

.mydiv {
  border-radius: 25px;
  color:#c4c6c7;
  font-size:20px;
  background-color:white;
  height: 50px;
  width:40%;
  border-style:solid;
  border-color:#c4c6c7;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="mydiv" id="c1" onclick="checkans(this.innerHTML)">choice 1</div>