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

Question

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

我试过先将其设置为 table (tr/td)，然后设置为 divs/spans 以像 table 一样运行，但遇到同样的问题每个设置。

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

我还包含了一个 jsfiddle。您可以通过将右下角 window 缩小到一个小尺寸（2-3 英寸宽，例如 phone）来重现该问题： 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

有两点值得关注：

考虑在您的 .css-td class

vertical-align: top;

如果您不自己指定，<p> 标记具有默认的浏览器边距。

尝试将上边距设置为 0，看看这个设置或两者的组合是否适合您。

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

Text not aligning with buttons when page size is small (phone width). Top of text aligning with center of button, not top

html

css

button

alignment

responsive-design