How can I get three bits of text to line up left, right, and centre using HTML and CSS?

Question

I have been trying to get three bits of text (styled to look like buttons) to line up left, centre, and right using HTML and CSS, no Flexbox or JS, but without success. How can this be achieved? This is what I need:

Here is my code:

 #row1 {padding: 20px 20px 5px 20px; overflow: hidden; } .button-container {display: block; text-align: center;} .button-left { padding: 0 5px; text-align: center; border: 1px solid; float: left; font-size: 75%; } .button-right { padding: 0 5px; text-align: center; border: 1px solid; float: right; font-size: 75%; } .button-centre { padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; }

 <div id="row1"> <div class="button-container"> <span class="button-left"><a href="#1">previous</a></span> <span class="button-centre"><a href="#2">issue</a></span> <span class="button-right"><a href="#3">next</a></span> </div><!--close button-container"> </div><!--close r1-->

Answer 1

Flexbox is ideal for this type of a problem:

 #row1 { padding: 20px 20px 5px 20px; overflow: hidden; } .button-container { display: flex; /* displays flex-items (children) inline */ justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */ align-items: center; /* centers them vertically */ } .button-left { padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; } .button-right { padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; } .button-centre { padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; }

 <div id="row1"> <div class="button-container"> <span class="button-left"><a href="#1">previous</a></span> <span class="button-centre"><a href="#2">index</a></span> <span class="button-right"><a href="#3">next</a></span> </div> </div>

Alternative without Flexbox :

 * {margin: 0; padding: 0; box-sizing: border-box} #row1 {padding: 20px 20px 5px 20px} .button-container {position: relative} .button-left { position: absolute; left: 0; padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; } .button-right { position: absolute; right: 0; padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; } .button-centre { position: absolute; left: calc(50% - 17px); padding: 0 5px; text-align: center; border: 1px solid; font-size: 75%; }

 <div id="row1"> <div class="button-container"> <span class="button-left"><a href="#1">previous</a></span> <span class="button-centre"><a href="#2">issue</a></span> <span class="button-right"><a href="#3">next</a></span> </div> </div>

Changes made: .button-container {position: relative} , also added position: absolute to all the children with appropriate values of the left and right properties , for the middle child the value of the left property calc(50% - 17px) is calculated based on it's width ( padding and border included) which is 34px divided by 2 and deducted from 50% .

Answer 2

HTML

<div id="row1">
<div class="button-container">
<span class="button"><a href="#1">previous</a></span>
<span class="button"><a href="#2">index</a></span>
<span class="button"><a href="#3">next</a></span>
</div><!--close button-container">
</div><!--close r1-->

CSS

#row1 {
        padding: 20px 20px 5px 20px;
           overflow: hidden; 
       }

.button-container {display: block; text-align: center;}

.button {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

Answer 3

You can use Flexbox , assuming you just want all the buttons to be next to each other you can give your .button-container the property display:flex; .

Here's a JSFiddle .

Your button container is already a block level element, since you are using a <div> so you don't need the display:block

Answer 4

 .btns { position: relative; display: inline-block; font-size: 0; } .btns a { position: relative; display: inline-block; text-decoration: none; background-color: #F4F4F4; color: #000; font-size: 14px; padding: 5px 15px; transition: all .3s ease-in-out; } .btns a:hover { background-color: #777; color: #FFF; } .btns a:first-child { border-radius: 10px 0 0 10px; border-right: 1px solid #CCC; } .btns a:last-child { border-radius: 0 10px 10px 0; border-left: 1px solid #CCC; }

 <div class="btns"> <a href="#">Previous</a> <a href="#">Index</a> <a href="#">Next</a> </div>

Answer 5

Simplest way would be to just add a <br> tag after each button, line this:

    <div id="row1">
    <div class="button-container">
    <span class="btns button-left"><a href="#1">previous</a></span>
    <br>
    <span class="btns button-centre"><a href="#2">index</a></span>
    <br>
    <span class="btns button-right"><a href="#3">next</a></span>
    <br>
    </div><!--close button-container">
    </div><!--close r1-->