navig8tr navig8tr - 2 months ago 14
CSS Question

How can i center align two divs?

How can I align two inline divs so that the their adjacent edges are center?

So I'd like it to look like this:

div1div1 div2div2
div1 div2
div1div1div1 div2div2


I tried using inline block like like below but it is 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>

Answer

https://jsfiddle.net/fkfmh7md/ to change the distance between divs, change 5px in padding:0 5px to any other value

<style> 
.container {
  display: table;
  width: 100%;
}

.container div {
  width: 50%;
  display: table-cell;
  padding: 0 5px;
}

.container div.left {
  text-align: right;
}
</style>
<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