Lining the shopping cart with the text horizantally-CodePudding

I want to display the text along with the shoping cart, but somehow the shopping cart is lifted little bit up rather than in the line of the text. Below is my code:

<span style="color:red;align-self:center;font-size:18px;text-align:center" >
                        <b>
                            IIf you are not the person noted below, please click here 
                                <a href="ShoppingCart"><img src="Images/shopcart.png" alt="cart" width="30" height="30" /></a>
                            to make payment and complete your order.
                        </b>
                        </span>

This is how it looks like on the web page:

I want to line the cart image horizontally to the text. Right now, the cart seems to be lifted above the line.

any help will be appreciated.

CodePudding user response：

The easiest way would be to simply turn your <b> element into a flex element with display: flex, and then apply align-items: center. This will vertically align all children relative to the center of <b>:

b {
  display: flex;
  align-items: center;
}

<span style="color:red;align-self:center;font-size:18px;text-align:center">
  <b>
    If you are not the person noted below, please click here
        <a href="ShoppingCart">
            <img src="https://media.istockphoto.com/vectors/shopping-cart-icon-isolated-on-white-background-vector-id1206806317" alt="cart" width="30" height="30" />
        </a>
    to make payment and complete your order.
  </b>
</span>

In addition to this, I would strongly recommend making use of <span> rather than <b>, as it is a good idea to separate presentation from markup. As such, you should also add a class to the outer span, and style everything through CSS exclusively.

CodePudding user response：

Try using flexbox align-items property in the element.

<span style="color:red;align-self:center;font-size:18px;text-align:center" >
     <b style="display: flex; align-items: center;">
        If you are not the person noted below, please click here 
        <a href="ShoppingCart"><img src="Images/shopcart.png" alt="cart" width="30" height="30" /></a>
        to make payment and complete your order.
     </b>
 </span>