Question

我有三行文字，我想在height=100px;（实际上是图像）的方框内均匀分布

我能做些什么来自动完成这项工作？或者我是否必须计算行高并更改padding s margin s line height和font sizes？

Answer 1

您可以应用line-height，即图片height的三分之一。

img {
    height: 100px;
    vertical-align: middle;
}
.text {
    vertical-align: middle;
    display: inline-block;
    max-width: 300px;
    line-height: 33.33px;
}

http://jsfiddle.net/myajouri/Nk5Hj/

Answer 2

我的解决方案涉及包含文本行的元素的高度。由于您的块是100px，您希望包含文本的块也是100px。它也可以是三个独立的块，总计100px。

以下两个独立的解决方案都有效。

HTML：

<div class="box1">box1</div>
<p class="p1">This is line 1.<br>
This is line 2.<br>
This is line 3.</p>

CSS：

.p1 {
  margin: 0;
  padding: 0;
  height: 100px;
  line-height: 33px;
  background-color: silver;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}

HTML：

<div class="box2">box2</div>
<p class="p2">This is line 1.</p>
<p class="p3">This is line 2.</p>
<p class="p4">This is line 3.</p>

CSS：

.p2, .p3, .p4 {
  margin: 0;
  padding: 0;
  height: 33.3px;
  line-height: 33.3px;
  background-color: silver;
}

.box2 {
  background-color: green;
  width: 100px;
  height: 100px;
  float: left;
}

Demo at CodePen

在第二个解决方案（单独的块）中，您可以省略行高，第一行文本将与框顶部对齐，其他行均匀分布在其下方。

垂直空间线

2 个答案: