如何将按钮对齐到屏幕中间？ [英] How do I align button to the middle of the screen?

问题描述

我试图在屏幕中间获得2个按钮。但是，这些按钮与我现在的代码重叠。我其实并没有使用太多的CSS，所以这可能是一个新手问题。

这是我的HTML：

  .wrapper {text-align：center;}。button {position：absolute; top：50％;}。button1 {background-color：Transparent;背景重复：不重复;填充：20像素;白颜色; border：3px solid #fff;}。button1：hover {border：3px solid＃000;}  

 < div id =particles-js>< / div>< div class =wrapper> < button class =button button1>按钮< / button> < button class =button button1> button2< / button>< / div>  

我不知道如何将这些按钮对齐到中间，并在按钮之间留出一点空间。如果有人可以帮助我，我真的很感激！

使用 text-align：center 水平居中嵌套元素

您可以通过声明 text-align：center 在嵌套子元素上包含父元素（ .wrapper ）并声明 display：inline-block 。

position：absolute 必须移除，因为我们希望保留元素在自然中 document flow - 为了使此方法有效，元素必须是 static 或位于 relative text-align：center 。

按预期工作，应满足一些要求：

1. 包含的父元素必须是块元素（例如：
   display：block ）


2. 您需要居中的嵌套元素应该是 inline-block
   元素（例如： display：inline-block ）
   
3. 否 float 规则应该在嵌套元素上声明，你是
   打算水平对齐， float 规则将否定任何努力
   来对齐元素以这种方式

*

 < div class =wrapper> < button class =button button1>按钮< / button> < button class =button button1> button2< / button>< / div>< br>< div class =wrapper> < button class =button button1 with-margin>按钮< /按钮> < button class =button button1 with-margin> button2< / button>< / div>  

或者...您可以使用Flex ...

使用<$ c $通过声明显示：flex 来水平居中嵌套元素

<对于包含父元素（ .wrapper ），然后 justify-content：center 来指定水平对齐，预期的结果。 flex-box 利用浏览器的内置功能完成所有繁重工作和精确对齐计算 - 顺便说一句，这也使其成为流行的响应解决方案。 / p>

  .wrapper {
 text-align：center; 
背景：灰色; / *所以我们可以看到发生了什么* / 
 padding：20px; / *给我们一些喘息的空间* / 
 / *附加* / 
显示：flex; 
 justify-content：center; 
} 
  

<覆盖> * {box-sizing：border-box; / *在使用border或padding属性或任何其他可以影响box-model * /}的属性时总是有用的。wrapper {text-align：center;背景：灰色; / *所以我们实际上可以看到发生了什么* / padding：20px; / *给我们一些喘息的空间* / / *附加* /显示：flex; justify-content：center;}。button {display：inline-block; / *自然在内联元素* /}之间创建空白。button1 {background-color：Transparent;背景重复：不重复;填充：20像素;白颜色; border：3px solid #fff; / *非必要的增强* /过渡：.7s; / *消除伪状态下的状态变化：hover * / min-width：100px; margin：auto 10px; / *嵌套元素之间的额外间距* /}。button1：hover {border：3px solid＃000;}

 < div class =wrapper> < button class =button button1>按钮< / button> < button class =button button1> button2< / button>< / div>  

flex-box 对传统浏览器的支持很差或有限，所以如果这将是对您而言，最好不要在生产中使用它。

IE <= 9 - 不支持

IE 10,11 - 部分支持

查看更多： https://caniuse.com/#feat=flexbox

编辑

垂直&水平对齐使用 flex-box & 位置：绝对

  .wrapper {
 text-align ： 中央; 
背景：灰色; / *所以我们可以看到发生了什么* / 
 padding：20px; / *给我们一些喘息的空间* / 
 / *附加* / 
显示：flex; 
 justify-content：center; 
 / *进一步增加* / 
位置：绝对值; 
剩下：0; 
 right：0; 
 top：0; 
 bottom：0; 
} 
  

<覆盖> * {box-sizing：border-box; / *在使用border或padding属性或任何其他可以影响box-model * /}的属性时总是有用的。wrapper {text-align：center;背景：灰色; / *所以我们实际上可以看到发生了什么* / padding：20px; / *给我们一些喘息的空间* / / *附加* /显示：flex; justify-content：center; / *进一步增加* /位置：绝对;左：0;正确：0; top：0; bottom：0;}。button {display：inline-block; / *自然在内联元素* /}之间创建空白。button1 {background-color：Transparent;背景重复：不重复;填充：20像素;白颜色; border：3px solid #fff; / *非必要的增强* /过渡：.7s; / *消除伪状态下的状态变化：hover * / min-width：100px; margin：auto 10px; / *嵌套元素之间的额外间距* /}。button1：hover {border：3px solid＃000;}

 < div class =wrapper> < button class =button button1>按钮< / button> < button class =button button1> button2< / button>< / div>  

b

I am trying to get 2 button in the middle of my screen. However these buttons are overlapping with the code that I have now. I actually don't use that much CSS, so this is probably a newbie question.

This is my html:

.wrapper {
  text-align: center;
}

.button {
  position: absolute;
  top: 50%;
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
}

.button1:hover{
  border: 3px solid #000;
}

<div id="particles-js"></div>
<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

I have no idea on how to align these buttons to the middle and leave a little space in between the buttons. If someone can help me, I'd really appreciate that!

解决方案

Using text-align: center to horizontally center nested elements

You can achieve this by declaring text-align: center on the containing parent element (.wrapper) and declaring display: inline-block on nested children elements.

position: absolute must be removed since we want to keep elements in the natural document flow - in order for this method to work, elements must be either static or positioned relative.

Note: for horizontal alignment, using text-align: center to work as expected, a few requirements should be met:

1. The containing parent element must be a block element (e.g: display: block)
2. The nested elements you need centered should be inline-block elements (e.g: display: inline-block)
3. No float rules should be declared on the nested elements you are intending to horizontally align, float rules will negate any effort to align elements in this way

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
}

.button1.with-margin {
  margin: auto 10px; /* for additional spacing between inline elements*/
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>
<br>
<div class="wrapper">
  <button class="button button1 with-margin">button</button>
  <button class="button button1 with-margin">button2</button>
</div>

Or... you could Just use Flex...

Using flex-box to horizontally center nested elements

By declaring display: flex on the containing parent element (.wrapper), then justify-content: center to specify the horizontal alignment, you get the intended result. flex-box leverages the browser's built-in power to do all the "heavy lifting" and calculations for precision alignment - which, incidentally, also makes it a popular responsive solution.

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

Heads up! flex-box has poor or limited support for legacy browsers, so if this is going to be a concern for you, it's probably better not to use it in production.

IE <= 9 - Not Supported
IE 10,11 - Partial Support
See more: https://caniuse.com/#feat=flexbox

Edit

Vertical & Horizontal Alignment using flex-box & position: absolute

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

这篇关于如何将按钮对齐到屏幕中间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！