HTML/CSS: 字体不呈现垂直居中与内联块

Question

我有以下 HTML/CSS 代码：

p {
  background: lightgray;
}

p#h {
  height: 1em;
}

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

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

image

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

如何让行内块与其父块高度相同？

或

如何让字体与span块垂直居中？

Answer 1

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

p {
  background: lightgray;
}

p#h {
  height: 1em;
}

span {
  display: inline-block;
  margin-left: .5em;
  height: 1em;
  width: 1em;
}

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

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

Fiddle - https://jsfiddle.net/e82gzayt/3/

编辑：删除 span 的高度和宽度限制，文本非常适合 p 块。

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

Answer 2

或者你可以试试 flex box

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 3

您可以使用 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 4

您可以使用 flex 值垂直居中。高级 css class.

试试这个

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; }

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

HTML/CSS: 字体不呈现垂直居中与内联块

HTML/CSS: Font does not render vertically centered with inline-block

html

css

vertical-alignment