时间戳

首页 > 解决方案 > 在 div 中居中排列三个按钮

html - 在 div 中居中排列三个按钮

问题描述

我需要在页面中间将一行三个按钮居中，因此三个按钮水平并排，它们之间没有空间。我尝试了很多不同的居中方法，但都无济于事。

div.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  align-content: center;
  text-align: center;
}

div.bottomwhitespace {
  padding-bottom: 100pt;
  padding-top: 100pt;
}

.btn-group .button {
  background-color: #4CAF50;
  /* Green */
  margin-top: 35pt;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace" class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>

标签： htmlcss

解决方案

我已经上传了更新的 CSS 和 HTML。我用display: flex那是最简单的方法来使页面上的按钮居中。我不知道您是否只想将它们水平居中，所以我同时做了水平和垂直。

http://jsfiddle.net/tcudp1ms/4/

CSS

html, body, .centre {
  height: 100%;
  width: 100%;
}

div.centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-group .button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}

HTML

<div class="centre">
  <div class="btn-group">
    <button class="button">My first button</button>
    <button class="button">My second button</button>
    <button class="button">My third button</button>
  </div>
</div>

推荐阅读