有没有办法在表格和简单的内联元素中对齐垂直对齐的文本？

Question

有什么方法可以使表格中的垂直对齐文本和简单的内联元素对齐？没有设置明确的高度或线高？https://jsfiddle.net/3xg92szL/

<style>
  body {
    font-size: 20px;
  }

  .inline-table {
    display: inline-table;
  }

  .aligned-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .va-middle {
    vertical-align: middle; 
  }

  .square {
    width: 100px;
    height: 100px;
    background-color: #FFDFD3; 
  }
</style>
<span class="inline-table square">
  <span class="aligned-cell">text in cell</span>
</span>
<span class="va-middle">vertical-align: middle;</span>
<span>vertical-align: baseline;</span>

Answer 1

由于您不想使用表格元素，因此有多种方法可以使元素的行为类似于<table>这是一些推荐页面给您：https://www.w3schools.com/cssref/pr_class_display.asp您还可以使用<div>元素和display: inline属性来调整其高度。