如何并排居中 2 个 Div

Question

我有 2 个 <div>，每个都有一个 <h1> 和一个 <button>。我希望它们居中但中间有 space。我在互联网上搜索了无数 Whosebug 问题、文章和教程，但其中 none 似乎有效，这是我的代码：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>

Answer 1

你的 CSS 中有 float: left; 用于我已删除的右侧面板。

我还设置了 margin-right 和 left 用于左右面板。

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>

Answer 2

将您的按钮和 <h2> 放入 div 并使用 flex。

试试这个：

.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>

Answer 3

问题没有说明 divs 是否也必须垂直居中。

仅水平居中:

HTML :

在 div 中扭曲 HTML 代码，class 如 .container 此处。

CSS :

将display设为flex for container class，将其justify-content 属性设为space-evenly。

从 .panel-right 中删除 margin-left 和 margin-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>

垂直居中:

如果您还希望它们垂直居中，请将 html、body、.container 的高度设置为 100%（或任何其他尺寸，如果您希望），并在 container class.

中将 align-items 属性设置为 center

如何并排居中 2 个 Div

How to Center 2 Divs Side by Side

html

css

centering