具有vertical-align 属性的元素的对齐应用的规则是什么？

编程问答 2022-05-23

问题描述

我想了解适用于具有 vertical-align css 属性的元素的规则是什么，元素通过这些规则获取所指对象的对齐方式。 我一直在尝试我能想象到的所有组合，以了解每个元素用来对齐自己的参考是什么。在一些文章中，在我读过的几乎所有文章中，都说引用是父对象，但就我尝试组合而言，这是不准确的。 我做了什么来找到元素参考对齐的规则：

  • 尝试所有组合：
    • 具有此属性的元素
    • 没有此属性的元素
    • 改变大小
    • 改变容器中元素的顺序

在用尽所有组合后，我无法达成一个规则/规则，元素通过该规则/规则获得它们的对齐参考，

  • 因为：
    • 变化取决于哪个元素更大
    • 这取决于元素的顺序
    • 如果有些人有这个属性而其他人没有这个属性，那会发生变化

所以，我自己无法得出规则的结论。我观察到该参考根据情况而变化。 我的问题是： 元素为了选择其对齐的参考而采用的规则是什么。

我发布了用于研究此主题的上下文的代码。我认为发布所有组合代码对帮助理解我的问题没有帮助。

HTMLS：

   <div class="P">
       <div class="block-1" style="vertical-align: bottom;"> 1 </div>
       <div class="block-2" style="vertical-align: middle;"> 2 </div>
       <div class="block-3" style=""> 3 </div> 
       <div class="block-4" style="vertical-align: middle;"> 4 </div>
  </div>

CSS：

        .P { height:400px; width:80%; border:5px rgb(224,167,11) solid; }
        .block-1 { height:250px; width:75px; border:5px rgb(234,238,13) solid }
        .block-2 { height:65px; width:30%; border:5px rgb(48,175,16) solid }
        .block-3 { height:275px; width:50px; border:5px rgb(43,126,17) solid }
        .block-4 { height:25px;width:18px;border:black 5px solid; }
        .P div   { display: inline-block; }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vertical-alignment