Question

我有一些程式化的圆形按钮，我注意到，当与其他元素内联显示时，它们就像对齐文本一样对齐。文本“按钮”与我的示例中的图像对齐，但按钮的实际区域挂在下面。这不仅看起来很奇怪而且看起来不直观，但它会推动整个元素线的底部边缘！

我已经尝试了几种方法让按钮的下边缘与图像的下边缘对齐，但没有任何效果。这似乎不应该是一个难题。

button {
  height: 64px;
  width: 64px;
  border: outset 8px #999; 
  border-radius: 64px;
}

<button>button</button> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto">

Answer 1

您可以使用此代码段集中对齐。

<强> CSS：

button {
  height: 64px;
  width: 64px;
  border: outset 8px #999; 
  border-radius: 64px;
  vertical-align:40px;
}
img {
  vertical-align: bottom;
}

<强> HTML：

<button>button</button> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto">

看看here

你如何通过边框而不是文本来对齐按钮？

1 个答案: