内联块元素在没有明显原因的情况下垂直对齐到底部（而不是默认的顶部） [英] Inline-block elements vertically align to bottom (instead of default top) for no apparent reason

问题描述

在

CSS：

  .resource_item {
 display：inline -块; 
宽度：31％； 
底边保证金：30px； 
 padding-left：1％; 
 padding-right：1％； 
} 
  

PHP：

  while ... 
 
？> 
< div class ='resource_item'> 
内容
< / div> 
<？php 
 
同时； 
  

解决方案

默认值 vertical -align 是基线，这就是为什么它与底部对齐。您可以使用 vertical-align：top 或其他可接受的值

  .resource_item {
 display：inline-block; 
 vertical-align：top; 
} 
  

垂直对齐：

  / *关键字值* / 
 vertical-align：基线； 
 vertical-align：sub; 
 vertical-align：super; 
 vertical-align：text-top; 
 vertical-align：text-bottom; 
 vertical-align：middle; 
 vertical-align：top; 
 vertical-align：bottom; 
 
 / *< length>值* / 
 vertical-align：10em; 
 vertical-align：4px; 
 
 / *< percentage>值* / 
垂直对齐：20％； 
 
 / *全局值* / 
 vertical-align：继承； 
 vertical-align：初始； 
 vertical-align：未设置； 
  

来源： https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align#Syntax

On my page, I have a list of elements of different heights set to inline-block with a width of about 33% to have 3 per row. In terms of vertical alignment, they should align to top (default behaviour). Instead they seem to align to bottom which makes no sense to me.

What makes them behave this way?

CSS:

.resource_item {
    display: inline-block;
    width: 31%; 
    margin-bottom: 30px;    
    padding-left: 1%;
    padding-right: 1%;
}

PHP:

while ...

    ?>
    <div class='resource_item'>
        Content
    </div>
    <?php

endwhile;

解决方案

The default value of vertical-align is baseline which is why it's aligning to the bottom. You can change the value with vertical-align: top or other acceptable values

.resource_item {
    display: inline-block;
    vertical-align: top;
}

Acceptable values for vertical-align:

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#Syntax

这篇关于内联块元素在没有明显原因的情况下垂直对齐到底部（而不是默认的顶部）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！