How to get 3 things in a line

HTML-CSS
#1 
.row1-1{
    float: right;
}
.row1-2{
    float: none;
}
.row1-3{
    float: left;
}

thats my css

n my html:

           <p class="row1-1 ">3</p>
           <p class="row1-2 ">2</p>
           <p class="row1-3 ">1</p>

how do i get the middle 1 to sit in the center of the pg?

#2

I’d recommend to stay away from float, it’s outdated. And painful.

You probably have a container for your <p> elements like this:

<div>
           <p class="row1-1 ">3</p>
           <p class="row1-2 ">2</p>
           <p class="row1-3 ">1</p>
</div>

Now just set the div to flex and watch the magic happen:

div {
  display:flex;
  justify-content:space-between;
}
3 Likes
#3

Take them all in one in to one " div tag " and give a class to " div "
" class= " display-flex"

for further Clean display you add one more class in div like this
class="display-flex align-center" if you are using bootstrap framework if Your not using bootstrap then use this css first add the class to div for styling like class=“display-flex forstyle”`

.forstyle{
text-align: center
}
#4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like