如何对齐 div 中间的 span 元素，从上到下？ [复制]答案

【问题标题】：How do I align span elements in the middle of a div, top to bottom? [duplicate]如何对齐 div 中间的 span 元素，从上到下？ [复制]
【发布时间】：2019-09-08 12:36:23
【问题描述】：

我想改变这个特定 div 的垂直位置中的所有元素，使它们居中对齐，从上到下。

"vertical-align: top" 适用于我的按钮，但不适用于我的其他两个文本元素

"margin: 0px" 似乎不起作用

.FirstRetailer {
  clear: both;
  background-color: #07213F;
  padding: 10px;
  height: 62px;
  line-height: 62px;
  color: #FFFFFF;
  vertical-align: top;
}

.RetailerRight1 {
  float: right;
  float: top;
  height: 42px;
  vertical-align: text-bottom;
}

.RetailerPrice1 {
  padding: 0px 10px;
  height: 22px;
}


.btnGoToProduct {
  background-color: #A60000;
  border: none;
  color: white;
  padding: 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  height: 42px;
  line-height: 42px;
  vertical-align: top;
}

<h3>
  <div class="FirstRetailer">

    <span class="RetailerLeft1">
      Product name
    </span>

    <span class="RetailerRight1">
      <span class="RetailerPrice1">
        $100.00
      </span>
      <a href="link" class="btnGoToProduct">Go to product</a>
    </span>
  </div>
</h3>

我的问题示例（图片链接） https://cdn.shopify.com/s/files/1/0052/2246/5585/products/123_grande.PNG?v=1567946072

我希望“产品名称”和“$100.00”与按钮对齐。

在此先感谢

【问题讨论】：

标签： html css shopify

【解决方案1】：

您可以通过将布局转换为使用 flex-box 来做到这一点。

我对 html 进行了一些更改（例如删除了 RetailerRight1 类）并删除了代码中的 css 浮动和垂直对齐规则。

代码：

.FirstRetailer{
    clear: both;
    background-color: #07213F;
    padding: 10px;
    height: 62px;
    display:flex;
    color: #FFFFFF;
    justify-content:flex-start;
    align-items:center;
}
.RetailerLeft1{
  margin-right:auto;
}
.RetailerPrice1 {
 padding: 0px 10px;
 height:22px;    
 }

.btnGoToProduct {
    justify-content:flex-end;
    background-color: #A60000; 
    border: none;
    color: white;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    height: 42px;
    line-height:42px;
    vertical-align: top;
}

 <h3>
  <div class="FirstRetailer"> 

       <span class="RetailerLeft1"> 
             Product name                                                           
       </span>
                              
          <span class="RetailerPrice1">                                                                             
             $100.00                                    
          </span>                                                                       
             <a href="link" class="btnGoToProduct">Go to product</a>  
   </div>
 </h3>

【讨论】：

谢谢。这就是我需要的解决方案。我还删除了“.RetailerPrice1 {height:22px; }”行，以使价格符合要求。再次感谢您

【解决方案2】：

默认情况下vertical-inline: baseline 用于保持 div 内联。无需添加任何其他 vertical-inline 属性。虽然从类 btnGoToProduct 中删除 vertical-align: top 可以解决问题，但我建议您删除所有 vertical-align 属性。

【讨论】：