Question

规范提到垂直显示属性（仅适用于内联块和内联块元素）对齐元素本身，但不对齐其内容。一个跨度，据我所知它是元素。在这个小提琴中，一切都按预期工作，但是需要完成才能将实际文本“Beta”集中在跨度中？

.b{
  display:inline-block;
  background-color:red;
  height:120px;
  vertical-align:middle;
}

<span class="b">Beta</span>

P.S：我不是在寻找快速解决方案，我知道我可以使用行高或展示台或其他一些东西。我更有兴趣弄清楚为什么它不起作用，或者更确切地说，为什么它是针对span元素而不是内部文本以及我需要什么来定位内部文本。

Answer 1

这是我的方法：

＆＃13;

.b{

  background-color:red;
  height:120px;
   display: inline-flex;
  align-items: center;
  
}

body{
  height:300px;
  
  }
}

＆＃13;

<body>
  <span >Alpha</span><span class="b">Beta</span><span>Gamma</span>
  <script src="js/scripts.js"></script>
</body>

＆＃13;

Answer 2

所以，你有somme解决方案：

变体1 添加行高

.b{
  background-color:red;
  display: inline-block;
  height:120px;
  line-height: 7.5em;
}

在这里试试：https://jsfiddle.net/69uhamv5/6/

变体2 以表格

为中心

.b, span {
  display: table-cell;
  vertical-align:middle;
}
.b {
  background-color:red;
  height:120px;
  }

body{
  display: table;
  height:300px;
  }
}

在这里试试https://jsfiddle.net/69uhamv5/5/

垂直对齐属性对齐元素

2 个答案: