Two elements in a row, one left aligned and one centered, how?

Question

I have two elements: a back-button and a Headline. Both should be in the same row, the back button should be left aligned and the Headline should be centered.

Let's take this example:

<div class="wrapper">
  <div class="button">
    <button>Back</button>

    <div class="headline">
      <h2>Headline</h2>
    </div>
  </div>
</div>

What do I have to do in CSS to get this result: Image

I tried using Translate X, but of course this solution isn't a responsive one, that's why I am searching one for all view-ports.

Big thanks and have a good rest of the weekend!

Spankied · Answer 1 · 2021-12-19T15:46:44.093

3

Center everything in wrapper using flexbox, then move button to the left with absolute positioning.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

button {
  position: absolute;
  left: 0;
}

<div class ="wrapper">

  <button>Back</button>

  <h2>Headline</h2>

</div>

edited Dec 19 '21 at 15:46

answered Dec 19 '21 at 15:34

Spankied

1,626
13
21

score 1 · Answer 2 · answered Dec 19 '21 at 15:30

Here's an easy way to do this if you know that it'll just be these 2 elements inside of the .wrapper container.

What you do is set the .wrapper to position: relative;, then set .button to position: absolute; this will allow you to position the .button inside of the .wrapper without taking up any space inside of the div. Then you set the .header to width: 100%; and text-align: center;

You'll need to play around with mobile, since the button will span over the header, at that point I would probably stack the elements to make it easier to for the user to click the back button.

.wrapper {
  position:relative;
  background: #dedede;
}

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

.headline {
  width:100%;
  text-align:center;
}

<div class ="wrapper">
  <div class="button">
    <button>Back</button>
  </div>
  <div class ="headline">
    <h2>Headline</h2>
  </div>
</div>

score 0 · Answer 3 · answered Dec 19 '21 at 15:30

0

This solution is using css flex.

.wrapper{
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: baseline;
}
.headline{
  display: flex;
  flex-direction:row;
  justify-content: center;
  width:100%;
}

<div class ="wrapper">
  <div class="button">
    <button>Back</button>
  </div>

  <div class ="headline">
    <h2>Headline</h2>
  </div>
</div>

answered Dec 19 '21 at 15:30

Daniel Paul

495
1
6
13

Headline isn't centered properly. Its offset by the width off the back button. – Spankied Dec 19 '21 at 15:35

score 0 · Answer 4 · answered Dec 19 '21 at 15:33

<div class="wrapper">
  <div class="button" style="float: left;">
    <button>Back</button>
  </div>
  <div class="headline">
    <h2 style="text-align: center;">Headline</h2>
  </div>
</div>

Actually, this is not exactly what you want.

But very simple and tricky way.

score 0 · Answer 5 · edited Dec 19 '21 at 16:21

0

Another easy way using css flex:

.wrapper {
  display: flex;
  align-items: center;
}

.headline {
   margin: auto;
}

<div class ="wrapper">
  <div class="button">
   <button>Back</button>
  </div>
  <div class ="headline">
   <h2>Headline</h2>
  </div>
</div>

edited Dec 19 '21 at 16:21

Spankied

1,626
13
21

answered Dec 19 '21 at 15:41

yatinsingla

434
6
13

Headline isn't centered properly. Its offset by the width off the back button. – Spankied Dec 19 '21 at 15:45

Laaouatni Anas · Answer 6 · 2022-07-21T18:41:36.670

using CSS GRID

this is responsive! centered,

and all the CSS code is in the parent selector!

(with flex, you will write a lot for this simple thing)

explanation

place-items are for centering. (is like writing justify-.. and align-..)

grid-template-column is for specifying how the grid should be (there are many ways to set the grid, but this is the shortest)

in fact, AUTO gets the width of the element and set to it, but 1FR gets

(AllWidthParent-AutoChildWidth)

Code

<div class="wrapper">
    <div class="button">
        <button>Back</button>
    </div>
    <div class="headline">
        <h2>Headline</h2>
    </div>
</div>

<style>
    .wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        place-items: center;
        width: 100%;
    }
</style>

https://jsfiddle.net/laaouatni/vg5L38am/1/

Two elements in a row, one left aligned and one centered, how?

6 Answers6

This solution is using css flex.