当前位置: 首页 > 面试题库 >

为什么我的内嵌块div中只有一个包含文本,它们不对齐?

华坚成
2023-03-14
问题内容

实时页面 在这里。

鉴于此HTML页面:

section[role=main] {

  margin: 1em;

  width: 95%;

  border: 1px solid #999;

}



section[role=main] article {

  width: 40%;

  height: 180px;

  margin: 1em;

  display: inline-block;

  border: 1px solid black;

}


<section role="main">

  <article>Java</article>

  <article></article>

</section>



<section role="main">

  <article>Java</article>

  <article>JavaScript</article>

</section>

我希望我的两篇文章都对齐,但是正如下面的屏幕快照所示,只有当我的两篇文章都带有文本时,<article>元素才会居中对齐

任何想法导致此行为的原因以及如何解决?


问题答案:

这是CSS中“基线”垂直对齐的结果。根据CSS 2.1规范的第10.8节“线高计算”:“ line-height”和“ vertical-
align”属性

基准线

将框的基线与父框的基线对齐。 如果该框没有基线,则将下边距边缘与父对象的基线对齐。 (我的重点)

由于内联块的默认对齐方式是“基线”,因此除非被覆盖,否则将应用此规则。将文本放入内联代码块时,该文本将为内联代码块创建基线,并且第一句(非粗体)适用。

如果内联块中没有文本,则它没有基线,因此第二句(加粗)适用。

在此处的JSFiddle中:我从您的示例中删除了margin:1em正在(至少对我而言)造成误导性错觉的情况,并添加了文本baseline以显示包含框的基线在哪里是。基线位于“基线”一词的底部,因此您可以看到空的内联块的底部边距边缘与上述CSS规则要求的父级基线对齐。



 类似资料:
  • 我见过类似的问题,但他们仍然没有意义,我的猿类大脑。 这里有一个例子。如果我在名为的头文件中声明了一个函数:并且在文件中声明了一个函数:。我在另一个文件(例如)中看到过这样的人,它只包含头,它只有声明(里面没有代码),而不包含带有代码的。但令我震惊的是,当他们调用中的函数时,它使用了中的代码并打印“hello”。怎么做?当我只包含了文件时,它如何打印在文件中添加的“hello”,而它只是一个声明,

  • 标记有助于在视图层次结构中将一个布局包含在另一个布局中时消除冗余的视图组。例如,如果您的主布局是一个垂直的,其中两个连续的视图可以在多个布局中重用,那么放置这两个视图的可重用布局需要它自己的根视图。但是,使用另一个作为可重用布局的根将导致在垂直的中出现垂直的。嵌套的除了降低UI性能之外,没有任何实际用途。 罗曼,你在哪?

  • 我试图打印包含,但是,HashSet没有检测到整数[]值。这和它被引用有关系吗?如果我不想将实际的整数[]对象传递给方法的参数,我如何克服这个问题?

  • 问题内容: 我只是想知道… 为什么我只有一个Calendar对象实例。有一个单例的原因吗? 我试图阅读文档,但他们没有提及为什么需要这样做。快速谷歌搜索没有给我任何答案。 问题答案: 日历不是单例,它是一个抽象类。该方法是一个Factory方法,它返回Calendar类的具体实现。 在Google上搜索java.util.Calendar源代码,您将看到它的工作方式。

  • 在这里你可以下载一个acroform字段的pdf,他的大小正好是427KB 如果我删除这个唯一的字段,文件只有3KB,为什么会发生这种情况?我试着用PDF调试器分析,对我来说没有什么奇怪的。