How to make text and image side by side-CodePudding

So, I was planning to add the image and text to be side by side but everytime I move the text it randomly disappears. Here's what it looks like:

Image

HTML

            <img src="/assets/profile.png" alt="profile">
            <h2>ASPECTER</h2>
        </div>

CSS

.profile{
    position: absolute;
    top:0;
    right: 0;
    float: right;
    color: white;
    margin: 0;
}

.profile img{
    position: absolute;
    top: 10px;
    right: 160px;
    width: 40px;
    height: auto;
    border-radius: 500px;
}

CodePudding user response：

.list_view
{
display:flex;
align-items:center;
}
.list_view h2
{
padding:10px;
}

  <div >
     <img src="https://picsum.photos/seed/picsum/200/300" alt="profile">
     <h2>ASPECTER</h2>
  </div>

CodePudding user response：

Use bootstrap, It will be cleaner method

 <div classs="row"><div ><img src="imgsource"></img></div>
<div >Text</div>
</div>

CodePudding user response：

You can use flex properties to do so.

Give flex to the wrapping div and then align the child inside it as per your requirements

Below is the example

.maindiv{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

.profileimg {
    top: 10px;
    right: 160px;
    width: 40px;
    height: auto;
    border-radius: 500px;
}
.text {
   margin-left:5px;
}

<div >
   <img  src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" alt="profile">
   <h2 >ASPECTER</h2>
</div>