如何使我的按钮垂直居中？答案

【问题标题】：How to center my buttons vertically?如何使我的按钮垂直居中？
【发布时间】：2017-07-04 12:23:23
【问题描述】：

我在每个按钮周围放置了一个 div，并将它们都设置为内联。他们只是想堆叠，因为我一直试图让他们居中。

这是我的 HTML：

     body{
	 background-color:black;
     }


    #light{
	margin-left:50%;
	margin-right:70%;
    }

    #dark{
	margin-left:50%;
	margin-right:50%;
	display:inline-block;
    }
	

    h3{
	color:white;
	font-family:Courier New;
	font-size:24px;
	margin-left:500px;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro page.css">
    </head>

    <body>

    <h3>make your choice.</h3>

    <div id="light"><button>Light</button></div>
    <div id="dark"><button>Dark</button></div>


    </body>
    </html>

这是这个东西在做什么的屏幕截图：

【问题讨论】：

用 text-align:center 属性代替左右边距试试
请参考此链接：stackoverflow.com/questions/396145/…。它有更好的处理方法。
How to vertically center a div for all browsers?的可能重复
我不认为在文件名中有空格是一个好习惯，就像你为你的 css 文件所做的那样：href="intro page.css"

标签： html css button

【解决方案1】：

您忘记将#light div 设置为inline-block。但可能更好的方法是将两个按钮都包围在一个 div 中，并提供一些 text-align:center 的 css，如下所示：

body{
  background:black;
}
h3{
  text-align:center;
  color:white;
  font-family:Courier New;
  font-size:24px;
}
.text-center{
    text-align:center;
}

<h3>Make Your Choice</h3>
<div class="text-center">
    <button>Light</button>
    <button>Dark</button>
</div>

【讨论】：

【解决方案2】：

试试这个

CSS

 body{
 background-color:black;
 }


#light,#dark,h3{
  text-align:center;
}


h3{
color:white;
font-family:Courier New;
font-size:24px;
}

使用 text-align:center 属性代替左右边距

希望这会有所帮助...

【讨论】：

【解决方案3】：

希望这会有所帮助：

body{
    background-color:black;
}
#light{
    position: absolute;
    top: 45%;
    left: 50%;
}
#dark{
    position: absolute;
    top: 55%;
    left: 50%;
}
h3{
    color:white;
    font-family:Courier New;
    font-size:24px;
    text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro page.css">
  </head>

  <body>

    <h3>make your choice.</h3>

    <div id="light"><button>Light</button></div>
    <div id="dark"><button>Dark</button></div>


  </body>
</html>

【讨论】：

【解决方案4】：

你可以尝试两件事

使用以下样式并删除不必要的margin-right

button {     
   margin-top : __px;
}

使用相对位置

button {
   position: relative;
   top:20%;
}

这会解决你的问题

或者您也可以在Vertically centering button using css尝试第一个答案

如果您需要任何进一步的帮助，请告诉我

【讨论】：

【解决方案5】：

将按钮放在主容器 div 中，宽度为 100%，并将按钮的边距更改为自动。父 div 必须为 100% 宽度，如果其边距设置为 auto，则子 div 将居中对齐。 https://codepen.io/DannaB67/pen/KqRoJK

   body{
     background-color:black;
     }
  .main{
    width:100%;}

  #light{
    margin:auto;
    display:inline-block;
    }

  #dark{
    margin:auto;
    display:inline-block;
    }

  h3{
    color:white;
    font-family:Courier New;
    font-size:24px;
    text-align: center;
    }

<body>

    <div align="center" class="main">

      <h3>make your choice.</h3>
      <div id="light"><button>Light</button></div>
      <div id="dark"><button>Dark</button></div>

   </div>

</body>

【讨论】：