Question

演示

我做了一个自定义单选按钮，但是DOM结构使自定义复选框的中间很难对齐，我需要标签的右边有不同的行，并且该复选框在水平方向居中。

<div>
  <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
  <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row two</p> </label>
</div>

Answer 1

您可以使用CSS Grid轻松做到这一点

将网格声明为2行x 2列（将第一行设置为min-content），将align-items居中，并使：before元素跨越2行

lit-html

/* only demo styles */
body {
  font-family: Raleway;
}

.wrap{
/*prevents from occupying 100% width*/
  display:inline-block;
}

/* end only demo styles */

.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: grid;
    align-items:center;
    grid-template-columns: min-content 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label p, .radio-custom-label p{
  margin:0;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    /*tells the button to occupy both rows */
    grid-row: 1 / 3;
    background: #fff;
    border: 2px solid #ddd;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    background: rebeccapurple;
    box-shadow: inset 0px 0px 0px 4px #fff;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 4px #fff;
}


.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd; /* focus style */
}

Answer 2

只需在您的div中使用flebox

div{
  display:flex;
  flex-direction:row;
  align-items:center;
}


p{margin:0;}

<div>
  <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
  <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row two</p> </label>
</div>

Answer 3

删除<p>元素，然后向其添加<br/>

 <label for="radio-1" class="radio-custom-label"><p>Row one</p><p>Row 
   two</p> </label>

进入

<label for="radio-1" class="radio-custom-label">Row one<br/>Row 
       two </label>

然后在您的CSS上：添加float:left;

之前

.radio-custom:checked + .radio-custom-label:before {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 4px #fff;
      float: left;
}

检查此代码段

/* only demo styles */

body {
  font-family: Raleway;
}

/* end only demo styles */

.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
      float: left;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    background: rebeccapurple;
    box-shadow: inset 0px 0px 0px 4px #fff;
  float:left;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 4px #fff;
      float: left;
}


.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd; /* focus style */
}

    <form>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked >
          <label for="radio-1" class="radio-custom-label">Row one <br />Row two</label>
        </div>
    </form>

在自定义单选按钮上对齐项目中心

3 个答案: