How to keep img at left and p tag in center inside div-CodePudding

How can I design a img tag in starting and p tag in center of div. Below design I need to make

This is I tried

<div  style="width: 18rem;">
    <div  style="display:flex; flex-direction: row; align-items: center">
            <img style=" width:45px;"  src="assets/session.png" alt="Card image cap">
            <p style="justify-content:center;align-items: center;" >SESSION TIME</p>
    </div>
</div>

I can do it by putting margin and padding but I want to know the better way of doing it. I am using HTML, CSS and Bootstrap. How can I do it ?

CodePudding user response：

change your code like below,

    <div  style="/* display:flex; */flex-direction: row;align-items: center;text-align: center;display: inline-block;width: 100%;background: #8c8891;padding: 2%;">
          <img style="vertical-align:middle; width:45px;float: left;"  src="1.png" alt="Card image cap">
          <p style="justify-content:center;align-items: center;text-align: center;display: inline-block;" >SESSION TIME</p>
   </div>

CodePudding user response：

Here's a link containing an example of how you can do it. Example uses a flex container to group the image and input field together. You can replace the input element with a text element and it will have the same effect.

https://www.w3schools.com/howto/howto_css_form_icon.asp