How do I align span elements in the middle of a div, top to bottom?

Question

I want to change all my elements in this specific div's vertical position, so that they are aligned in the middle, top to bottom.

"vertical-align: top" worked for my button, but not for my other two text elements

"margin: 0px" doesnt seem to work

.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>

Example of my problem (Link to image) https://cdn.shopify.com/s/files/1/0052/2246/5585/products/123_grande.PNG?v=1567946072

I would like the "Product name" and the "$100.00" to be centered inline with the button.

Many thanks in advance

score 0 · Accepted Answer · answered Sep 08 '19 at 13:07

You can do this by converting your layout to use flex-box.

I've made some changes to the html (such as removing the RetailerRight1 class) and removed the css float and vertical-align rules in the code.

Code:

.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>

Thank you. That is the solution I need. I have also removed the line ".RetailerPrice1 {height:22px; }" for the price to be in line. Thank you again — Jackson Harvey, Sep 08 '19 at 13:18

score 0 · Answer 2 · answered Sep 08 '19 at 13:07

The vertical-inline: baseline is by default and it is used to keep the divs inline. No need to add any other vertical-inline properties. Although just removing the vertical-align: top from class btnGoToProduct will fix the issue but I suggest you remove all the vertical-align properties.

How do I align span elements in the middle of a div, top to bottom?

2 Answers2