CODEWITHSUNDEEP
htmlcssimagegridrow
seyet
seyet

Reputation: 1150

aligning row content to the right horizontally html

I have a text and a small image that I want to align horizontally to the right:

    <div class="row float-right">
      <div class="title" >Stream Chat</div>
      <img src="~assets/chat.svg" />
    </div>
    <!-- rest of the code -->
    <div class"row">
    ...

I want both to be on the same line next to each other not underneath eachother. Ican use float-right and move them to the right but the issue is first the img goes under the text and second the row moves to the right of the below row and they stay in the same line! How can I fix it in a way that the text and img stay level and to the right of the row?

Upvotes: 0

Views: 45

Answers (1)

DCR
DCR

Reputation: 15665

USE FLEXBOX!! It's definitely the easiest way to do this

#container{
display:flex;
justify-content:flex-end;
align-items:center;
border:solid 1px blue;
}
<div id="container">
  <div id='txt'>Stream Chat</div>
  <img src="https://via.placeholder.com/100" />
</div>

Upvotes: 1

Related Questions