把文字放在单选按钮的顶部

Question

我想把文字放在复选框的顶部。假设有这个HTML代码：

<div class="radio">
    <input type="radio" name="optradio" value="pubblic" checked>Public
</div>

我想创建一个以这种方式处理元素的类css：

Public
  []

任何人都可以帮助我？

Answer 1

您可以使用position: absolute，如果您不想更改HTML部分

＆＃13;

＆＃13;

.radio {
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.radio input[type="radio"] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  bottom: 0;
}

＆＃13;

<div class="radio">
  <input type="radio" name="optradio" value="pubblic" checked>Public
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox可以做到这一点：

＆＃13;

＆＃13;

.radio.col-up {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="radio col-up">
  <input type="radio" name="optradio" value="public" checked>Public
</div>

＆＃13;

＆＃13;

＆＃13;