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

Posted 2021-04-04

我有以下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>

答案

你可以像这样轻松地做：

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>

另一答案

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

.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>

另一答案

<!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>

以上是关于水平和垂直对齐伪元素的内容的主要内容，如果未能解决你的问题，请参考以下文章

<ul> 水平导航栏...垂直对齐元素

<ul> 水平导航栏...垂直对齐元素

列表导航中的垂直对齐伪元素

CSS实现垂直居中的7种方法

将元素水平和垂直对齐到页面的中心[重复]

CSS水平居中与垂直居中的总结