html - How can i center align two divs? -
how can align 2 inline divs adjacent edges center?
so i'd this:
div1div1 div2div2 div1 div2 div1div1div1 div2div2
i tried using inline block like below merely centering each line.
.container { text-align: center; } .left-div { display: inline-block; } .right-div { display: inline-block; }
<div class="container"> <div class="left-div">div1div1</div> <div class="right-div">div2div2</div> </div> <div class="container"> <div class="left-div">div1</div> <div class="right-div">div2</div> </div> <div class="container"> <div class="left-div">div1div1div1</div> <div class="right-div">div2div2</div> </div>
https://jsfiddle.net/fkfmh7md/ change distance between divs, change 5px in padding:0 5px other value
.container { display: table; table-layout: fixed; width: 100%; } .container div { display: table-cell; padding: 0 5px; } .container div.left { text-align: right; }
<div class="container"> <div class="left">div1div1</div> <div>div2div2</div> </div> <div class="container"> <div class="left">div1</div> <div>div2</div> </div> <div class="container"> <div class="left">div1div1div1</div> <div>div2div2</div> </div>
Comments
Post a Comment