Html 对齐内联块中的div_Html_Css

Html 对齐内联块中的div

html css

Html 对齐内联块中的div,html,css,Html,Css,有人能解释一下这些div的行为吗？我想知道，为什么它们不在一条线上对齐？为什么向div添加文本会移动其他div 以下是html和css： <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>My Social Network</title>

有人能解释一下这些div的行为吗？我想知道，为什么它们不在一条线上对齐？为什么向div添加文本会移动其他div

以下是html和css：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

    </body>
</html>

谢谢。将非常感谢指向文档或文章的链接。

在一行上对齐

div {vertical-align: middle;}

内联块

是一个具有许多奇特特性的属性。在本例中，您可以清楚地看到，从

div

CSS规则中删除

height:100px

，将导致元素的文本对齐，这在华丽的圆形虚线彩色边框中并不明显。所以要解决这个问题，您需要应用

垂直对齐：top

。（）

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

相比之下，默认情况下浮动在顶部对齐

元素已对齐。。。但显然不是你想的那样；）

问题的关键在于属性

垂直对齐

首先删除边框半径
，以便更好地查看框。

然后添加垂直对齐：中间：问题已解决（）
无论内容与否，每个框现在都相对于其固定高度对齐（您将其固定为100px）
在没有垂直对齐的情况下，首先发生了什么：中间？更改基线的值
：返回原始问题。这是默认值，例如，在span
s中显示文本时，或在标签和文本字段中显示文本时，无论两者上的填充和边距如何，都需要此值。但是，由于文本必须占据2或3行（框的宽度为100px，无论其内容如何），基线与您预期的非常不同，它是内容的基线，也就是文本的最后一行。

空div的情况也一样：因为他们缺少可供调整的内容，所以他们的基线是他们的底部（对此不太确定，但似乎就是这样发生的）。

在一些空的div
中添加单个字符或不可拆分的空格：它们的基线现在与空div完全不同。请参阅
同样的现象也发生在一段文字中丢失了一个高大的图像；您可以将其与垂直对齐
对齐，但区别在于更容易看到发生了什么。在这里，你没有一个“正常”的文本出现，所以发现它有点困难
为什么浮动：左；你在这里工作吗？它将获取每个高度相同的框，并将其相对于框而不是其内容对齐。但是你必须管理清除，一个盒子上多放一个1px会破坏以下所有盒子的对齐…
添加一个浮动：左将解决此问题，请参见此处：
还添加了垂直对齐：top也将解决此问题：
这是因为内联块在html中使用空格时行为怪异 我对小提琴的反应是“神圣的F…”。我没想到hahaTry会在你的div中添加一个float属性。@PerfectDark：空格的问题似乎是支持使用float而不是内联块（使代码更易于维护）的有力论据。
div {vertical-align: middle;}