Place text in the center of a div while ignoring other elements inside of it

Question

There is a big div which contains two buttons which are at the end.

<big-div>            <small-div>my text</small-div>      <button1><button2></big-div>

I want the text inside small-div to be centered with respect to the big-div ignoring the buttons. Now it not in center but a little closer to the left side because of the buttons.

CSS files:

.big-div {
    display: flex;
}

.button1 {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}
.button2 {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}

.small-div {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0d1e2c;
    margin: 10px 0;
}

Any suggestions about how to "ignore" the buttons when positioning the text?

.big-div {
display: flex;
background-color: red;
width:100%;
height: 100px;
}

.small-div {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0d1e2c;
    margin: 10px 0;
}

.buttons {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}

<div class="big-div">
 <div class="small-div">my text</div>
 <button class="buttons">button1</button>
 <button class="buttons">button2</button> 
</div>

Please see how to create a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) using *valid* HTML so we can see what you are trying to do, and be able to give you answers that will solve the real problem you have! — FluffyKitten, Jul 28 '20 at 19:43
Are you using Sass and Less and CSS all in the same project? — Heretic Monkey, Jul 28 '20 at 20:02

score 1 · Accepted Answer · answered Jul 28 '20 at 19:55

You can add position: absolute; left: 50%; transform: translateX(-50%); to the .small-div and justify-content: flex-end; to the .big-div:

.big-div {
  display: flex;
  justify-content: flex-end; 
}

.button1 {
  margin-left: .25em;
}

.button2 {
  margin-left: .25em;
}

.small-div {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #0d1e2c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div class="big-div">
  <div class="small-div">
    small div is here
  </div>
  <button class="button1">button1</button>
  <button class="button2">button2</button>
</div>

Code-only answers are discouraged on Stack Overflow. Please explain how this code works to fix the problem, so that it is helpful to other users who have the same question also :) — FluffyKitten, Jul 28 '20 at 20:20

score 0 · Answer 2 · answered Jul 28 '20 at 19:33

0

css rule 'position: absolute;' will make div position not relative to other elements on page. So you can place it freely.

answered Jul 28 '20 at 19:33

Austin Roose

69
2
11

score 0 · Answer 3 · edited Jul 28 '20 at 19:40

0

Try setting an absolute value to where you want it to go

i.e.

.small-div {
    font-weight: 600;
    font-size: 32px;
    position: absolute;
    right: 20px;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0d1e2c;
    margin: 10px 0;
}

edited Jul 28 '20 at 19:40

FluffyKitten

13,824
10
39
52

answered Jul 28 '20 at 19:39

BandoKai

1
1

Place text in the center of a div while ignoring other elements inside of it

3 Answers3