Question

我无法让文字底部正常工作。从我正在阅读的内容中，div应该在文本的底部对齐，但是它将它对齐在底部，就像它被“底部”对齐一样。

div {
  display: inline-block;
  vertical-align: text-bottom; //same as bottom
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

<div>hello</div>
<div>world</div>

Answer 1

＆＃34;应该在文本的底部对齐...＆＃34; - 那是vertical-align: baseline，这是内联块的默认设置，因此你可以完全删除该属性，并且DIV将沿着它们的最低文本行对齐：

＆＃13;

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

＆＃13;

<div>hello</div>
<div>world</div>

＆＃13;

Answer 2

文字对齐是为了将项目与父的文字对齐，而非兄弟

＆＃13;

main{
}

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  vertical-align: text-bottom;

}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
}

＆＃13;

<main>
  Text
  <div>hello</div>
  <div>world</div>
</main>

＆＃13;

如果仅将其设置在其中一个而不是两者上，您仍然可以使用它，但

＆＃13;

div {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
}

div:first-child {
  width: 100px;
  height: 200px;
  border: 3px solid black;
  line-height: 100px;
}

div:nth-child(2) {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid red;
  vertical-align: text-bottom; 
}

＆＃13;

<div>hello</div>
<div>world</div>

＆＃13;

Answer 3

vertical-align不适用于块级元素。 Read about vertical-align on MDN

vertical-align仅适用于内联和表格单元格：您不能使用它来垂直对齐块级元素。

为什么不垂直对齐：文本底部工作？

3 个答案: