我的代碼中有兩個按鈕，我想知道如何用CSS將它們移到螢屏中央。我試著玩了一下 padding。10px 24px 24px 30px;但它似乎并沒有把兩個按鈕放在螢屏的中心。此外，我希望它們是有反應的。
這是我的片段：
。/* .btn-group button { */
.btn-group-vertical button {
background-color: #0b0e0d; /* 黑色背景 */
border: 1px solid rgb（239, 240, 239）; /* 邊界 */
color: white; /* white text */
padding: 10px 24px 30px; /* 一些頂部右側底部左側的填充 */
cursor: pointer; /* 指標/手形圖示 */
width: 50%; /* 設定一個寬度，如果需要的話*/。
display: block; /* 使按鈕出現在彼此下方 */
font-weight: bold;
字體大小: 14px;
text-transform: 大寫。
margin-bottom: 50px;
}
.btn-group button:not（:last-child） {
border-bottom: none; /* 防止雙重邊界 */
}
/* 在懸停時添加背景色 */ }
/* .btn-group button:hover { */
.btn-group-vertical button：hover {
background-color: #ffffff;
color: #0b6d11;
}<div >
<div >
<div class="btn-group-vertical">
< button type="button" id = "stbButton" ' "> 第一個按鈕</按鈕>/span>
<button type="button" id = "cdbButton" > 第二個按鈕</button>
</div>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
在你的容器中使用display:flex，然后將你的元素向中間對齊和調整。將flex-container設定為column將使您的元素堆疊在彼此的頂部。
將高度設定為100vh將使容器充滿視口的高度，并且您的內容將被垂直地集中在其中：
span class="hljs-selector-class">.btn-group-vertical {
display: flex;
align-items: center;
justify-content: center;
flex-direction:列。
height:100vh。
}
/* .btn-group button { */; }
.btn-group-vertical button {
background-color: #0b0e0d;
/* 黑色背景 */
border: 1px solid rgb（239, 240, 239）;
/* 邊界 */
color: white;
/* 白色文本 */
padding: 10px 24px 24px 30px;
/* Some padding top right bottom left */.
cursor: 指標。
/* 指標/指標圖示 */
width: 50%。
max-width:300px; /* set a maximum width if you fancy */
/* 設定一個寬度，如果需要的話*/。
display: block;
/* 使按鈕出現在彼此下方 */
font-weight: bold;
字體大小: 14px;
text-transform: 大寫。
margin-bottom: 50px;
}
.btn-group button:not（:last-child） {
border-bottom: none;
/* 防止雙重邊框 */。
}
/* 在懸停時添加背景色 */ }
/* .btn-group button:hover { */
.btn-group-vertical button：hover {
background-color: #ffffff;
color: #0b6d11;
}< div class="btn-group-vertical"/span>>
<button type="button" id="stbButton"> 第一個按鈕</按鈕>。
<button type="button" id="cdbButton">> 第二個按鈕</button>
</div>uj5u.com熱心網友回復：
在btn-group-vertical類中添加margin: auto。它將被定位在中心位置，并且是回應式的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321617.html
標籤：
上一篇：如何在選定的專案上設定旋鈕配接器