html – float：left;歧义 – CSS

发布时间：2020-12-14 16:42:51 所属栏目：资源来源：网络整理

导读：让我们以两张图片为例随着浮动：左; 没有浮动：左; HTML h6spanSign Up/span/h6 CSS h6:before { content: url("images/arrow.png"); padding-right: 8px; float: left; // Here lies problem} 题为什么没有浮动：左;文字(注册)下降？这背后的科学是什么？

让我们以两张图片为例

随着浮动：左;

没有浮动：左;

HTML

<h6><span>Sign Up</span></h6>

CSS

h6:before {
   content: url("images/arrow.png");
   padding-right: 8px;
   float: left; // Here lies problem
}

题

为什么没有浮动：左;文字(注册)下降？这背后的科学是什么？

解决方法

伪元素的默认显示模式是display：inline;默认的垂直对齐方式是vertical-align：baseline;.这意味着图像将与文本的基线对齐.

浮动元素时,其显示模式变为display：block;它将从文档流中删除.垂直对齐不再是一个因素,在这种情况下,跨度的上边缘现在与浮动伪元素的上边缘对齐.

正如Luis P. A.和Paulie_D在评论中提到的那样,更改垂直对齐将允许非浮动的伪元素与文本的中间对齐：

h6:before {
  content: url("http://placehold.it/20x20");
  display: inline-block;
  padding-right: 8px;
  vertical-align: middle;
}
h6 span {
  vertical-align: middle;
}

<h6><span>Sign Up</span></h6>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!