页面尺寸较小（手机宽度）时，文本未与按钮对齐。文本顶部与按钮中心对齐，而不是顶部

Question

我有一个简单的设置，包括按钮和他们所做的事情的描述。在完整的计算机屏幕或平板电脑上显示时看起来很棒，但是一旦屏幕变得像手机屏幕一样小，它就会失调。似乎描述段落的顶部与按钮的中心对齐，而不是每个元素的顶部对齐。

我尝试先将其设置为表格（tr / td），然后将divs / spans设置为表格，但每个设置都有相同的问题。

问题的图片如下所示，在chrome设置为最小尺寸时显示。其他浏览器也会出现类似问题。

我还包括一个jsfiddle。您可以通过将右下方的窗口缩小到一个小尺寸（2-3英寸宽，就像在手机上）来重新创建问题： https://jsfiddle.net/f6fbkrg0/4/

HTML：

<div class="css-table">
  <div class="css-tr">
    <span class="css-td"><button class="admin-table-button" id="set-time-button" style="width:100%;height:100%">Set Time</button></span>
    <p class="button-description">Syncs the time on the machine to the system time of this device</p>
  </div>
  <div class="css-tr">
    <span class="css-td"><button class="admin-table-button" id="night-mode-button" style="width:100%;height:100%">Night Mode</button></span>
    <p class="button-description">Toggle alternate color shceme for easy viewing in low-light conditions</p>
  </div>
</div>

CSS：

.css-td {
  display: table-cell;
  padding: .5em 5px;
}

.css-table {
  display: table
}

.css-tr {
  display: table-row
}

.button-description {
  padding-left: 25px;
  vertical-align: middle
  text-align:
}

.admin-table-button {
  margin-top 0px;
}

Answer 1

有两件事要注意：

1. 请在vertical-align: top;班级
上添加.css-td
2. 如果您自己未指定，则<p>标记具有默认的浏览器边距。

尝试将上边距设置为0并查看这些内容或两者的组合是否适合您。