主页 / 问题 / 642323
Accepted
MaximPro
Asked:2020-03-21 17:57:32 +0000 UTC2020-03-21 17:57:32 +0000 UTC

内联块和垂直对齐

  • 772

问题是不清楚vertical-align属性是如何工作的。

这是一个例子：

div
{
    display:inline-block;
    border:1px solid red;
    padding:5px;
}
div.main
{
    padding:10px;
}
.first
{
    width:100px;
    height:100px;
}
.second
{
    width:100px;
    height:100px;
}
.third
{
    width:110px;
    height:50px;
}
.four
{
    width:110px;
    height:50px;
}
<div class="main">
Hello world!
  <div class="first">Hello world 1! Hello world 1! Hello world 1!</div>
  <div class="second">Hello world 2!</div>
  <div class="third">Hello world 3!</div>
  <div class="four"></div>
</div>

如您所见，块按要求排成一行。display:inline-block; 但是您需要以某种方式设置这些块的对齐方式：对齐顶部、底部、中间。这就是vertical-align属性应该帮助我们的地方，因为该属性为我们提供了对象的内联display:inline-block;特性。但这不是它原来的位置，问题是如果块是行内块，那么如果里面有一些文本，那么对齐将等于这个文本，而不是块。

向我解释vertical-align如何与inline-block一起使用。

如何忽略内联块元素内的内容（文本）？

html

2 个回答

  1. Best Answer

    有文本对齐，有块对齐。默认情况下，vertical-align: baseline。baseline- 表示行内块内的一行文本。

    如果您不需要它，请将其设置为不同的值： , ,类型vertical-align的其余属性不以任何方式依赖于块的内容，并且与元素的边界对齐。topmiddlebottom

    与表不同，它vertical-align被分配给元素本身，而不是父元素。

    vertical-align在我的代码段中查看不同的属性：

    $('a').click(function(){$('.main > div').css("vertical-align",$(this).data("align"))})
    div
{
    display:inline-block;
    border:1px solid red;
    padding:5px;
}
div.main
{
    padding:10px;
}
.first
{
    width:100px;
    height:100px;
}
.second
{
    width:100px;
    height:100px;
}
.third
{
    width:110px;
    height:50px;
}
.four
{
    width:110px;
    height:50px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
Hello world!
  <div class="first">Hello world 1! Hello world 1! Hello world 1!</div>
  <div class="second">Hello world 2!</div>
  <div class="third">Hello world 3!</div>
  <div class="four"></div>
</div>


<a href="javascript:;" data-align="baseline">baseline</a>
<a href="javascript:;" data-align="top">top</a>
<a href="javascript:;" data-align="bottom">bottom</a>
<a href="javascript:;" data-align="middle">middle</a>

    • 3

  2. “显示”属性的比较清楚地显示在这里http://htmlbook.ru/css/display 。不幸的是，据我所知，“vertical-align”仅适用于表格。在其他情况下，您将不得不使用 padding/margin 或 js

    • 1

相关问题