时间戳

首页 > 解决方案 > 如何将 2 个 div 并排居中

html - 如何将 2 个 div 并排居中

问题描述

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

标签： htmlcsscentering

解决方案

该问题未指定是否divs也必须垂直居中。

仅水平居中：

HTML：

在 中扭曲 HTML 代码div，类如.container这里。

CSS：

设置display为类，并将其属性设置flex为。containerjustify-contentspace-evenly

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

对于垂直居中以及：

如果您还希望它们垂直居中，请将html, body,的高度设置.container为100%（或任何其他尺寸，如果您愿意），并将align-items属性设置为center类中container。

推荐阅读