How to Center 2 Divs Side by Side

Question

I have 2 <div>s each with a <h1> and a <button>. I want them to be centered but with space in between. I have scoured the internet looking at countless StackOverflow questions, articles, and tutorials but none of them seem to be working, here is my code: https://jsfiddle.net/obznmdcr/16/

button {
    text-align: center;
    height: 75px;
    width: 225px;
    font-size: 30px;
    border-radius: 40px;
    overflow: hidden;
    border: none;
    position: relative;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.panel-left {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: grid;
    place-items: center;
    float: left;
    padding: 0px 30px 30px 20px;
    vertical-align: middle;
}

.panel-left h2 {
    font-family: Helvetica;
    text-align: center;
    padding-bottom: 5px;
    margin-left: auto;
}

.panel-right {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: grid;
    place-items: center;
    float: left;
    right: 500px;
    padding: 10px 20px 30px 20px;
    margin-left: 18%;
    margin-right: auto;
    vertical-align: middle;
}

.panel-right h2 {
    font-family: Helvetica;
    text-align: center;
    padding-bottom: 25px;
}

.btn-left {
    background: linear-gradient(90deg, #ff5e62, #ff9966);
}
.btn-left:hover {
    background: linear-gradient(90deg, #ff9966, #ff5e62);
}
.btn-left:active {
    background: linear-gradient(90deg, #d68359, #d36668);
}

.btn-right {
    background: linear-gradient(90deg, #ff9966, #ff5e62);
}
.btn-right:hover {
    background: linear-gradient(90deg, #ff5e62, #ff9966);
}
.btn-right:active {
    background: linear-gradient(90deg, #d36668, #d68359);
}

<div class="panel-left">
  <h2>Title Left</h2>
  <button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
</div>
<div class="panel-right">
  <h2>Title Right</h2>
  <button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
</div>

Centered vertically or horizontally? Is it possible to illustrate the layout you want? — showdev, Aug 25 '20 at 02:52
I want them both to be on the same line and have the same distance from their respective window wall — , Aug 25 '20 at 04:13

score 1 · Accepted Answer · answered Aug 25 '20 at 03:26

The question does not specify if the divs have to be centered vertically as well.

For centering only horizontally :

HTML :

Warp HTML code in a div, with class like .container here.

CSS :

Set display as flex for container class, and set its justify-content property to space-evenly.

Remove margin-left and margin-right from .panel-right.

.container{
  display: flex;
  justify-content: space-evenly;
}

button {
  text-align: center;
  height: 75px;
  width: 225px;
  font-size: 30px;
  border-radius: 40px;
  overflow: hidden;
  border: none;
  position: relative;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.panel-left {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  float: left;
  padding: 0px 30px 30px 20px;
  vertical-align: middle;
}

.panel-left h2 {
  font-family: Helvetica;
  text-align: center;
  padding-bottom: 5px;
  margin-left: auto;
}

.panel-right {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  float: left;
  right: 500px;
  padding: 10px 20px 30px 20px;
  /*margin-left: 18%;
  margin-right: auto;*/
  vertical-align: middle;
}

.panel-right h2 {
  font-family: Helvetica;
  text-align: center;
  padding-bottom: 25px;
}

.btn-left {
  background: linear-gradient(90deg, #ff5e62, #ff9966);
}

.btn-left:hover {
  background: linear-gradient(90deg, #ff9966, #ff5e62);
}

.btn-left:active {
  background: linear-gradient(90deg, #d68359, #d36668);
}

.btn-right {
  background: linear-gradient(90deg, #ff9966, #ff5e62);
}

.btn-right:hover {
  background: linear-gradient(90deg, #ff5e62, #ff9966);
}

.btn-right:active {
  background: linear-gradient(90deg, #d36668, #d68359);
}

<div class="container">
  <div class="panel-left">
    <h2>Title Left</h2>
    <button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
  </div>
  <div class="panel-right">
    <h2>Title Right</h2>
    <button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
  </div>
</div>

For centering vertically as well :

In case you want them to be centered vertically as well, set height of html, body, .container to 100% (or any other dimension if you wish), and set align-items property to center in container class.

thank you! https://jsfiddle.net/ctabgd0z/2/ – Aug 25 '20 at 18:54 — , Aug 25 '20 at 18:54

luek baja · Answer 2 · 2020-08-25T02:58:40.077

You have float: left; in your CSS for the right panel which I have removed.

I also set margin-right and left for the left and right panels.

button {
        text-align: center;
        height: 75px;
        width: 225px;
        font-size: 30px;
        border-radius: 40px;
        overflow: hidden;
        border: none;
        position: relative;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
        cursor: pointer;
    }

    .panel-left {
    margin-right: 20px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        float: left;
        padding: 0px 30px 30px 20px;
        vertical-align: middle;
    }

    .panel-left h2 {
        font-family: Helvetica;
        text-align: center;
        padding-bottom: 5px;
        margin-left: auto;
    }

    .panel-right {
    margin-left: 20px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        display: grid;
        place-items: center;
        right: 500px;
        padding: 10px 20px 30px 20px;
        margin-left: 18%;
        margin-right: auto;
        vertical-align: middle;
    }

    .panel-right h2 {
        font-family: Helvetica;
        text-align: center;
        padding-bottom: 25px;
    }

    .btn-left {
        background: linear-gradient(90deg, #ff5e62, #ff9966);
    }
    .btn-left:hover {
        background: linear-gradient(90deg, #ff9966, #ff5e62);
    }
    .btn-left:active {
        background: linear-gradient(90deg, #d68359, #d36668);
    }

    .btn-right {
        background: linear-gradient(90deg, #ff9966, #ff5e62);
    }
    .btn-right:hover {
        background: linear-gradient(90deg, #ff5e62, #ff9966);
    }
    .btn-right:active {
        background: linear-gradient(90deg, #d36668, #d68359);
    }

<div class="panel-left">
      <h2>Title Left</h2>
      <button class="btn-left" id="btn" type="button" onclick="console.log('button pressed');">Button Left</button>
    </div>
    <div class="panel-right">
      <h2>Title Right</h2>
      <button class="btn-right" id="btn" type="button" onclick="console.log('button pressed');">Button Right</button>
    </div>

doesnt produce expected result: https://jsfiddle.net/xko3m6ej/1/ — , Aug 25 '20 at 04:12

score 0 · Answer 3 · edited Aug 25 '20 at 05:26

Put your button and <h2> into a div and use flex.

Try this:

.parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // justify-content: space-evenly;
}

<div class="parent">
  <div class="panel-left">
    <h2>Title Left</h2>
    <button class="btn-left" id="btn" type="button" onclick="console.log('button 
        pressed');">Button Left</button>
  </div>
  <div class="spacer">
  </div>
  <div class="panel-right">
    <h2>Title Right</h2>
    <button class="btn-right" id="btn" type="button" onclick="console.log('button 
        pressed');">Button Right</button>
  </div>
</div>

How to Center 2 Divs Side by Side

3 Answers3