Question

我做了框,我设置了线条高度, 文本自动垂直居中。是否有方法或任何手段将文本设置在框的底部?

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>

Answer 1

<强>2020更新

您可以使用 CSS 网格、弹性框或原方法, 使用 < code> line- leight :

body { display: flex } /* just to prettify */

div {
  margin: .5em;
  width: 6.25em; height: 6.25em;
  background: #eee;
  color: #333;
  text-align: center
}

.grid {
  display: grid;
  align-content: end;
}

.flex {
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }

<div class= grid >Hello</div>

<div class= flex >Hello</div>

<div class= lh >Hello</div>

将 div 和 line-leight 的 设置为相同值的 hile ,在您的情况中, <100px 是将文字垂直置于 div 内的一种方法。这是问题所在。



解决方案是将 line-leight  更改为文本的两倍高度减去大小,并删除无效的  垂直对齐  。

Answer 2

以 display: inline-block 标记连接到 p 标签中的文本。设置 垂直对称 到 p 元素。

<div>
    <p>FoxRox</p>
</div>

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
 }
p {
    display: inline-block;
    vertical-align: -80px;
}

http://jsfidd.net/Dfx92/6/" rel="noreferrer" >Demo

Answer 3

您可以设置显示到表格单元格, 尝试此 CSS 例如。

width: 100px; 
height: 100px; 
display: table-cell; 
vertical-align: bottom;

德莫:http://jsfiddle.net/Kawwr/"rel="nreferrer">http://jsfiddle.net/Kawwr/

Answer 4

你可以看看我对>的答复。

以下是上述答案的“强势”表示:http://jsfiddle.net/DotNetScott/7BBC/"rel=“不跟随新人”>demo 。

关键在于在外容器上使用 display: table- cell 。这样您就可以在 div 上使用 垂直对齐: bottom 和 display: inline- block; 。

友情链接