Center div based on child element

Question

I have three buttons inside a wrapper. As you may see in the snippet, the middle one is medium-sized, while the one in the left is wider and the right one is the smallest. I also have in this wrapper a title, which is aligned in the center.

What I'm trying to achieve is to align the buttons (in this case .btns div) based on the middle button, the medium-sized one. I want that button to be in the center, aligned with the title.

Here is a picture of what I would like the buttons to be aligned:

Although a CSS-only solution is preferable, I'm willing to use JS if needed.

How can I do that?

#content {
  background: black;
  width: 300px;
  height: 150px;
}

#title {
  padding-top: 30px;
  color: white;
  text-align: center;
}

.btns > a {
  text-decoration: none;
  color: blue;
  border: 2px solid red;
}

#b2 {
 margin: auto 15px auto 15px;
}

.btns {
  display: flex;
  justify-content: center;
}

<div id="content">
  <h1 id="title">Title</h1>
  <div class="btns">
    <a href="#">Button Large</a>
    <a id="b2" href="#">B Med</a>
    <a href="#">B S</a>
  </div>
</div>

https://stackoverflow.com/questions/55393088/align-3-unequal-blocks-left-center-and-right — Paulie_D, Dec 28 '19 at 18:51
Do you want out like this : https://jsfiddle.net/paqs0kjL/3/ ? — Abhishek Pakhare, Dec 28 '19 at 19:00
@AbhishekPakhare not actually, I was looking for all the three buttons on the same row. You can see what I mean on the photo in the original question. Thanks for trying to help anyway. — Picoral, Dec 29 '19 at 00:06
So according to the image you want your middle button under the TITLE and aligned center.right? Also does the size of the buttons need to be equal or not? — Abhishek Pakhare, Dec 29 '19 at 08:37

score 1 · Accepted Answer · answered Dec 28 '19 at 18:33

First question is why you would want this behaviour ?

You can achieve that in multiple different ways, one of them would be to use grid. That will work but from a design standpoint this is not a really pleasing pattern unless your use case really justify this.

Test pen link

#content {
  background: black;
  width: 300px;
  height: 150px;
}

#title {
  padding-top: 30px;
  color: white;
  text-align: center;
}

.btns{
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr auto 1fr;
}

.btns > a {
  text-decoration: none;
  color: blue;
  border: 2px solid red;
}

.b1{
  text-align: right;
}

Hope this solves your problem !

Thanks! It is not perfect but way better than what I had. Regarding your question, I was trying to do this because when I first tried with the normal alignment it was a little odd, didn't feel right, you know. — Picoral, Dec 29 '19 at 00:09

score -1 · Answer 2 · answered Dec 28 '19 at 16:48

-1

You should use flexbox for this.

display: flex; 
flex-direction: row; 
justify-context: center; 
align-items:center;

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

answered Dec 28 '19 at 16:48

Maya Davis

407
4
10

score -2 · Answer 3 · answered Dec 28 '19 at 17:03

-2

If the middle link should always be in the center, then you can set flex: 0 0 auto on it and flex: 1 1 0 on other 2.

answered Dec 28 '19 at 17:03

Vishal Biswas

401
2
8

Center div based on child element

3 Answers3