Question

我在每个按钮周围放了一个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>

这是这个事情的屏幕保护：

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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属性而不是左右边距

希望这会有所帮助......

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

Answer 4

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

Refresh

Answer 5

你可以尝试两件事

使用以下样式并删除不必要的边距

button {     
   margin-top : __px;
}

使用位置相对

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

这将解决您的问题

或者您也可以尝试Vertically centering button using css

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

如何垂直居中我的按钮？

5 个答案: