There are 3 buttons; button 2 is aligned strictly in the center, and the other two are at the same distance from it. How to arrange them in this way? Without the use of grids and frameworks (bootstrap).

Ready view

    2 answers 2

    display: flex + justify-content: space-around or justify-content: space-between

     .container-buttons { display: flex; justify-content: space-around; } 
     <div class="container-buttons"> <button>button 1</button> <button>button 2</button> <button>button 3</button> </div>

    • You are my savior)) - Asa Fornote

    Crosbrowser without Flex

     .container-buttons button{display:inline-block; *display:inline; zoom:1; vertical-align:top;} .container-buttons{text-align:justify;} .container-buttons:after{display:inline-block; *display:inline; zoom:1; width:100%; content:"";} <div class="container-buttons"> <button>button 1</button> <button>button 2</button> <button>button 3</button> </div>