How can I position elements relative to a centered div?

user_18080515 0
Viewed 45

I want to center two buttons that are on the same line, and then I want to position a selector on the same line, to the right of the two centered buttons. How can I do it? In other words, how can I position an element relative to a centered div?

EDIT: I want the end result to look something like this: https://i.imgur.com/KeVbCF2.png

centering css html
1 Answers

Flexbox does the job quite well!

.wrapper {  
  background: gray;
  display: flex;
  text-align:center;
  justify-content: flex-end;
  height:40px;
  align-items: center;
  justify-content: center;  
}

.m {
  width: 100%;
}
.m button {
  width: 100px;
}
.r {   
  width: 200px;
}
<div class="wrapper">
  <div class="m">
    <button>a</button>  
    <button>b</button>
  </div>
  <div class="r">Section C</div>
</div>

user_148071110
Related