html - 当页面尺寸较小(手机宽度)时，文本与按钮不对齐。文本顶部与按钮中心对齐，而不是顶部

Question

我有一个简单的按钮设置和按钮功能的描述。它在全电脑屏幕或平板电脑上显示时看起来很棒，但一旦屏幕变得像手机屏幕一样小，它就会错位。似乎描述段落的顶部与按钮的中心对齐，而不是每个元素的顶部对齐。

我曾尝试先将其设置为表格 (tr/td)，然后设置为 div/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，看看这或两者的组合是否对您有用。