CODEWITHSUNDEEP
htmlcss
navig8tr
navig8tr

Reputation: 1844

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>

Upvotes: 0

Views: 260

Answers (1)

Nodir Rashidov
Nodir Rashidov

Reputation: 732

https://jsfiddle.net/fkfmh7md/ to change the distance between divs, change 5px in padding:0 5px to any 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>

Upvotes: 1

Related Questions