Html CSS动态垂直对齐中的文本（<；部门>；有固定高度的

我有一个固定的高度

，因为我希望所有

元素具有相同的高度。我想将

中的文本动态地垂直居中对齐。如果我不想添加任何标记（

span

，

h1

，等等），是否可能

CSS HTML

选择1

使用

显示：表格单元格

和

垂直对齐：中间

将内容居中对齐

.mydiv{
边界半径：25px；
颜色：#c4c6c7；
字体大小：20px；
文本对齐：居中；
背景色：白色；
高度：150像素；
宽度：40%；
显示：内联块；
边框样式：实心；
边框颜色：#c4c6c7；
保证金：0自动；
溢出：隐藏；
显示：表格单元格；
垂直对齐：中间对齐
}

---

choice 1choice 1choice 1choice 1choice 1choice 1
choice 1choice 1choice 1choice 1

既然您已经定义了元素的高度，最简单的方法就是用相同数量的

px

设置

行高


.mydiv{
边界半径：25px；
颜色：#c4c6c7；
字体大小：20px；
文本对齐：居中；
背景色：白色；
高度：50px；
宽度：40%；
显示：内联块；
边框样式：实心；
边框颜色：#c4c6c7；
保证金：0自动；
溢出：隐藏；
线高：50px；
}
选项1
fiddler link是
没错，但也应该在trickb中添加“垂直对齐：中间”，但如果文本较长，则会移动到较低的位置position@androidnewbie如果这是一个问题，那么你需要在最初的问题中说，当用户发布了您问题的确切答案时，它也会更改my
div的宽度
难道您不能在
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;
}

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

.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;
  display:flex;
  align-items:center;
  justify-content:center
}