水平和垂直对齐伪元素的内容

Question

我有以下css单选按钮，但它们没有对齐。

我想知道如何正确地水平和垂直对齐较大圆圈中的较小圆圈。

 .container { position: absolute; z-index: 10; display: -ms-flexbox; display: flex; align-items: center; left: 1.25rem!important; } .radio-group__fieldset { border: none; padding: 0; } .radio-group__options__container { display: flex; } .radio__container { margin-bottom: 0; position: relative; } .radio__container input[type=radio] { position: absolute; cursor: pointer; left: 0; top: 0; z-index: 1; margin: 0; zoom: 1; opacity: 0; } .radio__container input[type=radio]:checked+label::after { opacity: 1; } .radio__container label { position: relative; font-weight: 400; color: inherit; display: -ms-flexbox; display: flex; align-items: center; font-size: 1.25rem; } .radio__container label::before { content: ""; border: 3px solid #0065bd; border-radius: 50%; } .radio__container label::after { content: ""; position: absolute; background-color: #0065bd; border: none; text-align: center; border-radius: 50%; opacity: 0; } .radio__inline label { margin-right: 0.625rem; } .radio__container.radio__inline label .radio__content { margin-left: 0.625rem; } .radio__container.radio__small input[type=radio], .radio__container.radio__small label::after, .radio__container.radio__small label::before { width: 13px; height: 13px; } .radio__container.radio__small label::before { border-width: 2px; border-radius: 50%; } .radio__container.radio__small label:after { transform: scale(0.8); } .radio__content { display: inline-block; vertical-align: middle; position: relative; top: 10%; } 

 <div class="container"> <fieldset class="radio-group__fieldset undefined"> <div class="radio-group__options__container pan-zoom-tree__dependency-filter"> <div class="radio__container radio__small radio__inline"> <input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked=""> <label for="depndency-view-0"> <div class="radio__content">Activities</div> </label> </div> <div class="radio__container radio__small radio__inline"> <input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers"> <label for="depndency-view-1"> <div class="radio__content">Suppliers</div> </label> </div> </div> </fieldset> </div> 

Answer 1

你可以像这样轻松地做：

 input { display: none; } label { display: flex; position: relative; padding-left: 30px; align-items: center; line-height: 30px; } label::before { content: ''; position: absolute; left: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid blue; } input#r1:checked ~ #l1::before { background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%); } input#r2:checked ~ #l2::before { background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%); } 

 <input type="radio" id="r1" name="inp"> <input type="radio" id="r2" name="inp"> <label for="r1" id="l1">Radio1</label> <label for="r2" id="l2">Radio2</label> 

这是@ TemaniAfif更简化的方式而不是radial-gradient背景。

 input { display: none; } label { display: flex; position: relative; padding-left: 30px; align-items: center; line-height: 30px; } label::before { content: ''; position: absolute; left: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid blue; padding: 3px; box-sizing:border-box; } input#r1:checked ~ #l1::before, input#r2:checked ~ #l2::before{ background:blue content-box; } 

 <input type="radio" id="r1" name="inp"> <input type="radio" id="r2" name="inp"> <label for="r1" id="l1">Radio1</label> <label for="r2" id="l2">Radio2</label> 

Answer 2

您可以尝试修改此规则，如下所示：

.radio__container label::after {
  content: "";
  position: absolute;
  background-color: #0065bd;
  border: none;
  border-radius: 50%;
  opacity: 0;
  left: 2px; /*This is the modification */
 }

片段：

 .container { position: absolute; z-index: 10; display: -ms-flexbox; display: flex; align-items: center; left: 1.25rem!important; } .radio-group__fieldset { border: none; padding: 0; } .radio-group__options__container { display: flex; } .radio__container { margin-bottom: 0; position: relative; } .radio__container input[type=radio] { position: absolute; cursor: pointer; left: 0; top: 0; z-index: 1; margin: 0; zoom: 1; opacity: 0; } .radio__container input[type=radio]:checked+label::after { opacity: 1; } .radio__container label { position: relative; font-weight: 400; color: inherit; display: -ms-flexbox; display: flex; align-items: center; font-size: 1.25rem; } .radio__container label::before { content: ""; border: 3px solid #0065bd; border-radius: 50%; } .radio__container label::after { content: ""; position: absolute; background-color: #0065bd; border: none; text-align: center; border-radius: 50%; opacity: 0; left:2px; } .radio__inline label { margin-right: 0.625rem; } .radio__container.radio__inline label .radio__content { margin-left: 0.625rem; } .radio__container.radio__small input[type=radio], .radio__container.radio__small label::after, .radio__container.radio__small label::before { width: 13px; height: 13px; } .radio__container.radio__small label::before { border-width: 2px; border-radius: 50%; } .radio__container.radio__small label:after { transform: scale(0.8); } .radio__content { display: inline-block; vertical-align: middle; position: relative; top: 10%; } 

 <div class="container"> <fieldset class="radio-group__fieldset undefined"> <div class="radio-group__options__container pan-zoom-tree__dependency-filter"> <div class="radio__container radio__small radio__inline"> <input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked=""> <label for="depndency-view-0"> <div class="radio__content">Activities</div> </label> </div> <div class="radio__container radio__small radio__inline"> <input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers"> <label for="depndency-view-1"> <div class="radio__content">Suppliers</div> </label> </div> </div> </fieldset> </div> 

Answer 3

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body style="height:900px"> <div class="container-fluid mt-3"> <form> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio2"> <label class="custom-control-label" for="customRadio1">RadioButton</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="customRadio2" name="customRadio2"> <label class="custom-control-label" for="customRadio2">RadioButton</label> </div> </body> </html>