Question

我有以下HTML / CSS代码：

＆＃13;

p {
  background: lightgray;
}

p#h {
  height: 1em;
}

span {
  display: inline-block;
  margin-left: .5em;
  height: 1em;
  width: 1em;
  background: red;
}

＆＃13;

<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>

＆＃13;

image

https://jsfiddle.net/e82gzayt/2/

如何让内联块与其父级具有相同的高度？

或

如何使用span块将字体垂直居中？

Answer 1

您应该在span内添加该文本以进行内联。此外，在第二种情况下，您将p元素的高度限制为1 em。

＆＃13;

p {
  background: lightgray;
}

p#h {
  height: 1em;
}

span {
  display: inline-block;
  margin-left: .5em;
  height: 1em;
  width: 1em;
}

＆＃13;

<p><span>Ay</span></p>
<p id="h"><span>Ay</span></p>

＆＃13;

检查第一个元素。现在它很好。

小提琴 - https://jsfiddle.net/e82gzayt/3/

编辑：删除跨度的高度和宽度限制文本适合在p块内。

演示：https://jsfiddle.net/e82gzayt/4/

Answer 2

您可以使用display: table-cell;和vertical-align: middle;执行此操作，然后将<p>标记包裹在<div>中，如下所示：

p#h { height: 2em; }
span { 
display: inline-block;
margin-left: .5em; 
height: 1em; 
width: 1em;
background: red;

}

.vertical-center {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  height: 2em;
  background-color: #dddddd;
  width: 400px;
  }

<div class="vertical-center">
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
</div>

Answer 3

或者您可以尝试使用弹性框

p { background: lightgray; 
display:flex;
  align-items: center;
}
p#h { height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }

https://jsfiddle.net/e82gzayt/5/

Answer 4

您可以使用弹性值垂直居中。高级css课程。

试试这个

＆＃13;

p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }

＆＃13;

<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>

＆＃13;

HTML / CSS：字体不会垂直居中显示内嵌块

4 个答案: