All geek questions in one place

Get the div in the center of the line

I am new to css. I'm actually trying to display three divs on the same line, with one element to the left of the page, the second element in the middle of the page and the third element on the right side of the page. Here is my script

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    #name {
        color: black;
        display: inline;
    }
    #group {
        color: black;
        display: inline;
        float: right;
    }
    #cent {
        color: black;
        display: inline;
    }
</style>

<div id="name" style="color: #000000;">EXAMPLE</div>
<div id="group" style="color: #000000;">GROUP</div>
<div id="cent">TEST</div>

Here the conclusion should be

EXAMPLE                         TEST                                    GROUP

but the output is displayed in

EXAMPLE TEST                                                  GROUP

Can anybody help me, fix this .TIA

+4
source share
3 answers

Use this:

#name, #group, #cent {float: left; width: 33.3333%}
+1
source

Try Flexbox Demo 2 Demo 3 Browser Support

.content {
  display: flex;
  justify-content: space-between;
}
<div class="content">
  <div id="name">EXAMPLE</div>
  <div id="group">GROUP</div>
  <div id="cent">TEST</div>
</div>
Run codeHide result
+4
source

. . .

#name { color: black; float:left; width:33%;}
#group { color: red; float:left; width:34%;}
#cent { color: green; float:left; width:33%}
+1

Source: https://habr.com/ru/post/1627338/

More articles:


All Articles