2

I have 2 divs within a parent div. The first child div needs to be centered in the parent, while the second child div needs to be at the right end, within the parent. Both children need to be on the same line. The left end of the parent needs to be empty.

I have already tried using flex with the parent, as well as inline-block and text-align on the children. Floating the children doesn't appear to work either.

Here is a link to my code.

.main {
  border: 2px solid black;
  width: 100%;
}
    
.center {
  display: inline-block;
}
    
.right {
  display: inline-block;
}
<div class="main">
  <div class="center">
    <div>A</div>
  </div>
  <div class="right">
    <div>D</div>
  </div>
</div>

The 'A' character needs to be in the center of the black box, while the 'D' needs to be at the very right side, within the black box.

doğukan
  • 23,073
  • 13
  • 57
  • 69
Cathal
  • 47
  • 1
  • 9

1 Answers1

-3

Is this?

.main {
  border: 2px solid black;
  width: 100%;
  display:flex;
}

.center {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}


.right {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}
<div class="main">
  <div class="center">
    <div>A</div>
  </div>
  <div class="right">
    <div>D</div>
  </div>
</div>

Or 

.main {
  border: 2px solid black;
  width: 100%;
  display:flex;
}

.center {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:center;
}


.right {
  display: inline-block;
  flex:1;
  display:flex;
  justify-content:flex-end;
}
<div class="main">
  <div class="center">
    <div>A</div>
  </div>
  <div class="right">
    <div>D</div>
  </div>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • 2
    These solutions aren't precise. `justify-content: flex-end` will align the content center-left ([demo](https://jsfiddle.net/7t5dag9z/)). – Michael Benjamin Jan 31 '19 at 02:38