In CSS, how can I center an element with respect to the containing element, regardless of other sibling elements?

Question

I have an inner div with three children; a button, some text and a button group.

I am using flex to center everything, but the problem is that the text is not actually centered with respect to the containing element. It is instead centering the text in between the near borders of the button and button group.

The text is not centered within the yellow box. I want the text to be centered in the yellow box.

Is there some way to say "measure from the edges of the outer element and ignore the inner edges of siblings"?

.outer-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-box {
  width: 500px;
  height: 60px;
  background-color: yellow;
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  </br>
  <div class="outer-box">
    <div class="inner-box">
      <button class="btn">My Button</button>
      
      <span>My text here</span>
      
      <div class="btn-group">
        <button class="btn">My Button1</button>
        <button class="btn">My Button2</button>
      </div>
    </div>  
  </div>
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Seems to be very similar, but the solution given over there does not work here :( — CodyBugstein, Mar 28 '19 at 14:41
there is the float element inside that you can easily fix like this: https://jsfiddle.net/9axvykfu/ but I suggest you to consider bootstrap 4 where there is no more float and only flexbox — Temani Afif, Mar 28 '19 at 14:48
becase the span will fill all the remaining space and the button will be palce inside with it's default width. So we stretch the span and not the button — Temani Afif, Mar 28 '19 at 14:51
In this https://jsfiddle.net/co8jeug5/, there is a gap on the right, and the width of the yellow area shrunk . hmm — CodyBugstein, Mar 28 '19 at 14:55
I corrected the gap in the second jsfiddle, it's due to float — Temani Afif, Mar 28 '19 at 14:56

score 0 · Accepted Answer · answered Mar 28 '19 at 14:12

Flex is treating the children of .inner-box essentially as columns.

If you want the text to be centered just to the yellow box, you can absolute position the text relative to the yellow box, like this:

.outer-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-box {
  width: 500px;
  height: 60px;
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  </br>
  <div class="outer-box">
    <div class="inner-box">
      <button class="btn">My Button</button>
      
      <span class="text">My text here</span>
      
      <div class="btn-group">
        <button class="btn">My Button1</button>
        <button class="btn">My Button2</button>
      </div>
    </div>  
  </div>
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

This works! Can you explain why you need to use both `left` and `transform` ? — CodyBugstein, Mar 28 '19 at 14:48
@CodyBugstein `left: 50%;` positions the text 50% into the yellow container from the left side. If the element you were trying to center was 0px wide, you could stop there. But because your text has a width, if you stopped there, it would be slightly too far to the right. `transform: translate(-50%, 0);` moves the element on the x-axis `-50%` from it's current position (in relation to itself). So, both `left` and `transform` are essential to actually center the element. Hope that helps. — mmshr, Mar 28 '19 at 17:54

score -1 · Answer 2 · answered Mar 28 '19 at 14:14

-1

If you would like to center the text within the span element you can directly change that elements alignment.

    .inner-box span {
    align-self: center; 
}

answered Mar 28 '19 at 14:14

Malik Brown

156
1
6

In CSS, how can I center an element with respect to the containing element, regardless of other sibling elements?

2 Answers2