How do I vertically center the text next to the floated images?-CodePudding

As you can see in the image below, there is a text next to the pictures how to i center it vertically

CodePudding user response：

Here's a tip, don't use floating images, use display flex instead, it's way more practical

            <div >
            <div >
         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Circle-icons-image.svg/800px-Circle-icons-image.svg.png">
            </div>
            <div >
                <p>Username</p>
                <p>[email protected]</p>
            </div>
        </div>

.editor-menu-user {
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.editor-user {
  padding: 10px;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.editor-user p {
  margin: 0;
}

.editor-profile-avatar {
  height: 100%;
}

.editor-profile-avatar img{
  height: 100%;
}

https://codepen.io/tovape/pen/RwMGdOg

CodePudding user response：

I have edited and made some changes to @Tovape answer. This is how it looks now:Image with centered text

img{
width:50px;
vertical-align:middle;
}
        
.text{
display:inline-block;
vertical-align:middle;
}

<div >
  <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Circle-icons-image.svg/800px-Circle-icons-image.svg.png">
  <div >
    <span>Username</span>
    <br>
    <span>[email protected]</span>
  </div>
</div>