无线电输入上的垂直对齐文本
[英]Vertical align text on radio input
问题描述
我正在为一个表单编写两个单选按钮。 对于此按钮，我设法在其中包含文本并使用标签对其进行个性化设置。 但是，当包含文本时（尽管添加了text-align=center; ），它会保留在按钮的顶部，而不是在按钮的中间垂直和水平对齐。 它水平对齐。
这是代码：
.buttonsform #locheck{ position:absolute; top:0px; left:0px; display:inline-block; border-radius: 40px; width: 190.47px; height: 45.96px; text-align: center; border: 1px solid #333333; font-family:Montserrat; font-style: normal; font-weight:500; font-size: 18.192px; line-height:22px; text-transform: uppercase; color:#333333; cursor:pointer; }.buttonsform #lpcheck{ position:absolute; top:0px; right:0px; border-radius: 40px; width: 190.47px; height: 45.96px; vertical-align: middle; text-align: center; border: 1px solid #333333; font-family:Montserrat; font-style: normal; font-weight:500; font-size: 18.192px; line-height:22px; text-transform: uppercase; color:#333333; cursor:pointer; }
<div class="buttonsform"> <input type="radio" name="odontologia" id="ocheck"> <input type="radio" name="podologia" id="pcheck"> <label for="ocheck" id="locheck">Odonotología</label> <label for="pcheck" id="lpcheck">Podología</label> </div>3 个解决方案
解决方案1
0 2021-08-16 14:29:58
按照我说的使用flexbox试试这个。
* { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; }.container { display: flex; flex-direction: row; }.container.option { display: flex; padding: 1rem; align-items: center; border-radius: 60px; border: 1px solid red; flex-direction: row-reverse; }.container.option:nth-child(2) { margin-left: 1rem; }.container.option label { margin-left: 0.5rem; }.container.option input:checked.option { background-color: green; }
<div class="container"> <div class="option"> <label for="option_1"> Odonotología </label> <input type="radio" id="option_1" /> </div> <div class="option"> <label for="option_2"> Podología </label> <input type="radio" id="option_2" /> </div> </div>
让我知道这个是否奏效？？
解决方案2
0
我想你正在寻找这个。
.boxed label { display: inline-block; width: 210px; border-radius: 50px;important: padding; 10px: border, solid 1px rgb(43, 43; 43). }:boxed input[type="radio"] { display; none. }:boxed input[type="radio"]:checked + label { background-color, rgb(17, 173; 235); } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <form class="boxed"> <input type="radio" id="cb1" name="skills" value="cb1"> <label for="cb1">Checkbox 1</label> <input type="radio" id="cb2" name="skills" value="cb2"> <label for="cb2">checkbox2 </label> </form> </body> </html>
解决方案3
-1 已采纳 2021-08-16 14:31:57
添加此样式
.buttonsform label {
display: flex !important;
align-items: center;
justify-content: center;
}
垂直对齐输入文本框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.