如何居中和對齊堆疊的單選按鈕
[英]How to center and align stacked radio buttons
問題描述
我試圖有一個帶有單選按鈕的輸入表單，其中每個選項都堆疊在彼此的頂部，並且所有選項都通過單選按鈕而不是標簽的長度對齊（居中）。
我正在尋找的最終結果：
到目前為止，我最好的方法是將所有內容居中，使用position: absolute 。 像這樣的東西。
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center
但是，使用這種方法，選項會受到文本長度的影響。
刪除上面的text-align ，它完全刪除了居中...
2 個解決方案
解決方案1
0 2021-06-25 00:24:18
將三個單選按鈕放置在另一個容器中的容器中，就像這樣。
<body>
<div class="center-horizonally">
<div class="radio-btn-container">
<div class="radio-1">yes</div>
<div class="radio-2">no</div>
<div class="radio-3">maybe</div>
</div>
</div>
</body>
<style>
.center-horizonally{
display: flex;
justify-content: center;
}
</style>
最外面的容器有display: flex; 和justify-content: center; 這將使具有按鈕的第二個容器水平居中。 第二個容器使三個單選按鈕在左側垂直對齊。 這可能不是最好的方法，但它應該有效。
解決方案2
0 2021-06-25 00:37:45
使元素居中的最簡單方法是使用display: flex; 在父元素和margin: auto; 關於孩子：
.container { display: flex; height: 100vh; } .container .middle { display: flex; flex-direction: column; margin: auto; }
<div class="container"> <div class="middle"> <div>Do you enjoy pizza with pineapple</div> <div class="middle"> <div><label><input type="radio" name="blah">Yay</label></div> <div><label><input type="radio" name="blah">Nay</label></div> <div><label><input type="radio" name="blah">Never heard of it</label></div> </div> </div> </div>
如何將一組單選按鈕居中對齊在測驗標題的中心並保持響應？
[英]how to center align a group of radio buttons under the center of the quiz title and keep responsive?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.