html – 为什么这个技巧在动态高度div中垂直居中(以及为什么它会中断)？

概述我发现这个 stackoverflow answer非常有趣.它可以垂直居中任意高度div中任意长度的文本.基本上它使用空的< span>直接在包含文本的节点前面标记,和 HTML： <div> <span></span><p>This is really really long text but it will be centered vertically.</p></div>​ CS 我发现这个 stackoverflow answer非常有趣.它可以垂直居中任意高度div中任意长度的文本.基本上它使用空的< span>直接在包含文本的节点前面标记,和

HTML：

<div>    <span></span><p>This is really really long text but it will be centered vertically.</p></div>​

CSS：

div {     background: yellow;     color: red;    wIDth: 200px;    text-align: center; /* horizontally center */    height: 300px; /* any height */    padding: 0 20px}div span:first-child {    height: 100%;    vertical-align: mIDdle;    display: inline-block; }div p {    margin: 0;            vertical-align: mIDdle;    display: inline-block; }

更有趣的是,如果您在两个单独的行上分隔结束范围标记(< / span>)和打开段落标记(< p>),或者如果在两者之间添加空格,则技巧会中断.

我的问题是 – 这个技巧如何运作？跨度如何帮助中心文本？为什么在关闭< / span>之间的HTML中添加换行/空格时会中断？标记和打开< p>标签？

我创造了一个小提琴,以证明这两点：https://jsfiddle.net/axRxE/385/

解决方法

My question is – how does this trick work? How is span helPing center the text?

由于您给出了span inline-block属性,因此span将继承它的父高(高度：100％) – 在您的示例中,它是固定的300px.既然你给段落赋予了相同的属性,那么这两个元素是彼此相邻的.看一个例子：

#parent {  height: 300px;}span {  height: 100%;  display: inline-block;  /* some wIDth and background-color for demonstration */  wIDth: 5px;  background-color: red;}p {  margin: 0;  display: inline-block;}

<div ID="parent">  <span></span>  <p>foobar</p></div>

并且你还将vertical-align：mIDdle(与内联块一起使用)放在它们上面,这使它们对齐(你只需要将该属性添加到较大的属性)：

#parent {  height: 300px;}span {  height: 100%;  display: inline-block;  /* some wIDth and background-color for demonstration */  wIDth: 5px;  background-color: red;  /* added vertical-align */  vertical-align: mIDdle;}p {  margin: 0;  display: inline-block;}

<div ID="parent">  <span></span>  <p>foobar</p></div>

And why does it break when a newline/whitespace is added in HTML between closing </span> tag and opening <p> tag?

这很简单 – 当你使用内联块时总是有a whitespace issue between them.而且由于你没有为段落添加一些宽度,它需要占用所有宽度,并且从空白处获得额外的宽度,段落低于跨度.

在您的示例中,您的父级具有120px宽度,跨度使用0px,因此该段落采用所有父级宽度,即120px.现在,使用额外的空格(约为4px),因为她的段落使用了所有宽度,所以空格不适合所以段落“中断” – 它低于跨度.

还检查：

> inline-block element with no text renders differently
> Vertical-Align: All You Need To Know.

总结

以上是内存溢出为你收集整理的html – 为什么这个技巧在动态高度div中垂直居中(以及为什么它会中断)？全部内容，希望文章能够帮你解决html – 为什么这个技巧在动态高度div中垂直居中(以及为什么它会中断)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。