将三个按钮的行居中div居中

时间：2018-06-28 13:20:10

标签： html css

我需要在页面中间居中放置三个按钮的行，因此这三个按钮在水平方向上彼此相邻，并且它们之间没有空格。我尝试了很多不同的居中方法，但无济于事。

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>

6 个答案:

答案 0 :(得分：0)

您可以在父级上使用display: flex并排对齐子级项。要指定您希望它们居中，可以添加justify-content: center;。

.btn-group {
    display: flex;
    justify-content: center;
}

此方法取代了您对float的需求，因此我将它们从按钮本身中删除了。

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 {
   display: flex;
   justify-content: center;
}

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

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

答案 1 :(得分：0)

我已经在小提琴中上传了更新的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>

答案 2 :(得分：0)

  
      
  • 将display:flex;应用于div.bottomwhitespace
    •   
  • 然后从margin: 0 auto;到.btn-group
    •   

就这样：）

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

.btn-group {
  margin: 0 auto;
}

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

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

答案 3 :(得分：0)

在您的特定情况下，您有2个问题： 1.浮动：向左防止居中 2.在一个单线态类属性中收集所有类（因此，文本对齐：未应用居中）

在固定初始代码后

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;
  font-size: 0
}

.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;
  display: inline-block;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
<div class="bottomwhitespace 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>

答案 4 :(得分：0)

display:flex似乎是您想要的。它可以轻松格式化此类内容。

div.bottomwhitespace {
    display: flex;
    justify-content: center;
    align-items: center;
    height:300px;
}

.button {
   background-color: #4CAF50;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

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

答案 5 :(得分：0)

首先，您的代码段中缺少</div>。

如果要对div内的中心内容使用边距自动，则必须使用固定宽度。

还有另外两种方式做到这一点

文字传送：中心；为父母 并显示：儿童内联块

和

将Flexbox与JustifyContent Center一起使用

这2之间的主要区别在于display：inline-block如果其中一项不适合第一行，则会移至第二行。

.center-content-display{
  width:600px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  outline:1px solid green;
}
.item{
  display: inline-block;
  min-width: 200px;
  min-height: 40px;
  text-align:left;
}
.item1{ background: red;}
.item2{ background: blue;}

.center-content-flex{
  width:600px;
  text-align: center;
  display: flex;
  justify-content: center;
  vertical-align: top;
  outline:1px solid green;
}
    <h1>Using Display inline-block</h1>
<span>Parent div w:600px</span>
<div class="center-content-display">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display flex (flexbox)</h1>
<span>Parent div w:600px</span>
<div class="center-content-flex">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display inline-block</h1>
<span>Parent div w:300px</span>
<div class="center-content-display" style="width:300px;">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>


<h1>Using Display flex (flexbox)</h1>
<span>Parent div w:300px</span>
<div class="center-content-flex" style="width:300px;">
     <div class="item item1"></div>
     <div class="item item2"></div>
</div>

希望这会有所帮助

相关问题
最新问题