如何垂直居中按钮？

我在每个按钮周围放置一个div，并将它们设置为内联。他们只是想堆叠，因为我一直试图把它们集中起来。如何垂直居中按钮？

这是我的HTML：

 body{ 
 
\t background-color:black; 
 
    } 
 

 

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

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

 
    h3{ 
 
\t color:white; 
 
\t font-family:Courier New; 
 
\t font-size:24px; 
 
\t 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>

这是什么这个东西是做撷取画面：

来源

2017-07-04 Isabella.

使用文本对齐：中心财产代替保证金的左，右，并给予尝试 –

请参考此链接：https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers。它有一个更好的方式来处理这个问题。 – Sujith

可能重复[如何垂直居中所有浏览器的div？]（https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – NewUser

你忘了设置#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>

来源

2017-07-04 03:18:00

试试这个

CSS

body{ 
background-color:black; 
} 


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


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

使用文本对齐：中心财产，而不是利润率左右

希望这有助于...

来源

2017-07-04 03:19:31

希望这将有助于：

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>

来源

2017-07-04 04:01:30 skm

将您在主div容器按钮，宽度为100％，并改变的边缘按钮自动。父div必须为100％宽度，如果其边距设置为auto，它们将居中对齐。 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>

来源

2017-07-04 04:09:32 DanielaB67

可以尝试两件事

使用以下的造型和除去
```
button {  
    margin-top : __px; 
} 
```

使用相对不必要余量 - 右位置

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

这将解决你的问题

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

让我知道如果您需要任何进一步的帮助

来源

2017-07-04 04:10:37

如何垂直居中按钮？

回答

相关问题