时间戳

首页 > 解决方案 > 浮动元素位置更改元素对齐方式

html - 浮动元素位置更改元素对齐方式

问题描述

我有一些奇怪的行为float，认为这可能很简单，但我是 css 的新手，正在学习为什么和如何问题。

在这里，当我将浮动元素应用于button它时，它会将元素的水平中心对齐方式更改为顶部，不知道为什么。

任何帮助将非常感激。

<h2>Image Text</h2>
<p>Center text in image:</p>

<div style="border: 1px solid red;">
  Text on left
  <span><button style="height:40px;">test</button></span>
</div>

在此处输入图像描述

现在添加

<span ><button style="height:40px;float:right">test</button></span>

在此处输入图像描述

我知道这个问题可以通过多种方式解决，我只是想知道这些元素与 float 的奇怪行为。

问候 MK

标签： htmlcsscss-float

解决方案

要了解发生了什么，您需要考虑默认垂直对齐baseline是创建第一个输出的事实。

这是查看基线的更好说明：

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:14px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}
<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;">test</button></span>
</div>

如您所见，两个文本的对齐方式相同，并且按钮以某种方式定义了基线。您的文本不像您想象的那样居中。

增加font-size看看会发生什么：

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:14px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}
<div style="border: 1px solid red;" class="box">
  <span >Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  <span style="font-size:20px;">Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  <span style="font-size:30px;">Text on left</span>
  <span><button style="height:40px;">test</button></span>
</div>

我们仍然有相同的基线逻辑，而不是中心逻辑。

另一个按钮高度较小的示例

.box {
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:9px;
  height:1px;
  background:blue;
  left:0;
  right:0;
}
<div style="border: 1px solid red;" class="box">
  <span style="font-size:40px;">Text on left</span>
  <span><button style="height:20px;">test</button></span>
</div>

仍然是相同的基线。

您可以通过更改垂直对齐来更改此行为。

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:bottom">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:top">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;vertical-align:sub">test</button></span>
</div>

现在，如果您将按钮浮动到右侧，它将成为块级元素，并且不会再影响文本的对齐方式，这就是您获得以下输出的原因：

<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;float:right;">test</button></span>
</div>

即使您清除浮动以修复高度问题，文本仍将保留在顶部，并且更精确地对齐其行内的基线。

.box {
  overflow:auto;
}
<div style="border: 1px solid red;" class="box">
  Text on left
  <span><button style="height:40px;float:right;">test</button></span>
</div>

现在将红色块内的文本居中是一项常见的工作，您可以找到很多与此相关的问题。像另一个答案中所述的一种解决方案是设置line-height它将简单地增加线条的大小并围绕中心移动文本的基线。

一些相关问题以获得更多示例和详细信息：

Vertical-align 对齐除 self 之外的所有其他内容

垂直对齐不适用于内联块

为什么这个 inline-block 元素被向下推？

另一个需要注意的重要事情是按钮是如何移动到其跨度容器之外的。添加边框以查看此内容：

.box {
  overflow:auto;
}
<div style="border: 1px solid red;" class="box">
  Text on left
  <span style="border:2px solid blue;"><button style="height:40px;">test</button></span>
</div>

<div style="border: 1px solid red;" class="box">
  Text on left
  <span style="border:2px solid blue;"><button style="height:40px;float:right;">test</button></span>
</div>

另一个相关的问题来理解为什么：你能浮动到跨度的右边吗？

推荐阅读