Выровняйте переключатели по центру независимо от длины текста

Question

У меня есть 3 переключателя с 3 ярлыками рядом с ними, 2 из них имеют одинаковую длину символов, поэтому они выровнены друг под другом, но один посередине длиннее их, поэтому он не выровнен с другими 2 .

Вот скрипка .

Код:

.wrapper{
  text-align: center;
  vertical-align: middle
}

.radio-wrapper{
  text-align: center;
  margin-bottom: 2%;
}

.radio{
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0;
    display: inline-block !important;
    zoom: 1;
    vertical-align: middle;
}

.radio span{
    zoom: 1;
    text-align: center;
    vertical-align: middle;
}

.radio input[type=radio]{
    position: absolute;
    margin-left: -20px
}

.radio input{
  border: none;
  background: none;
  display: inline-block;
  zoom: 1;
  text-align: center;
  width: 18px;
  height: 18px;
}

input[type=radio] {
    margin: 4px 0 0;
    line-height: normal;
}

label{
  margin-bottom: 3px;
  vertical-align: sub;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  cursor: pointer;
  text-align: left;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="center-block wrapper">
    <div class="radio-wrapper">
      <div class="radio" id="uniform-trans-1">
        <span>
          <input type="radio" name="transaction" id="trans-1" value="0">
        </span>
      </div> <!-- .radio -->
      <label for="trans-1">Faster than I expected?</label>
    </div> <!-- .radio-wrapper -->
    <div class="radio-wrapper">
      <div class="radio" id="uniform-trans-2">
        <span>
          <input type="radio" name="transaction" id="trans-2" value="1">
        </span>
      </div> <!-- .radio -->
      <label for="trans-2">About the time I expected?</label>
    </div> <!-- .radio-wrapper -->
    <div class="radio-wrapper">  
      <div class="radio" id="uniform-trans-3">
        <span>
          <input type="radio" name="transaction" id="trans-3" value="2">
        </span>
      </div> <!-- .radio -->
      <label for="trans-3">Longer than I expected?</label>
    </div> <!-- .radio-wrapper -->
  </div> <!-- .wrapper -->
</div> <!-- .container -->

Как выровнять 3 входа друг под другом, чтобы все 3 входа были выровнены друг под другом независимо от длины текста метки рядом с ними?

Answer 1

Я вижу, вы используете загрузчик 3.3.7. Поэтому я отредактировал ваш HTML, чтобы он соответствовал требованиям. Затем я удалил ненужные CSS для своей демонстрации и добавил display: table !important, чтобы переопределить поведение начальной загрузки по умолчанию, которое позволяет нам свернуть дополнительное пространство вокруг и центрировать контейнер.

http://jsfiddle.net/xquj471a/75/

CSS:

.center-block{display: table !important;}

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="center-block">
    <div class="radio">
      <label for="trans-1">
        <input type="radio" name="transaction" id="trans-1" value="0">
        Faster than I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-2">
        <input type="radio" name="transaction" id="trans-2" value="1">
        About the time I expected?
      </label>
    </div>
    <div class="radio">
      <label for="trans-3">
        <input type="radio" name="transaction" id="trans-3" value="2">
        About the time I expected?
      </label>
    </div>
  </div>
</div>

Answer 2

Я проверил ваш код и обнаружил, что вы не использовали классы начальной загрузки, которые вам действительно нужны. Согласно приведенному ниже коду, классы «row» и «col-md- *» могут вам помочь: (замените HTML-код и удалите написанные вами дополнительные классы)

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-1">
    <span>
      <input type="radio" name="transaction" id="trans-1" value="0">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-1">Faster than I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-2">
    <span>
      <input type="radio" name="transaction" id="trans-2" value="1">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-2">About the time I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

<div class="row">
  <div class="radio col-md-1" id="uniform-trans-3">
    <span>
      <input type="radio" name="transaction" id="trans-3" value="2">
    </span>
  </div> <!-- .radio -->
  <div class="col-md-3">
    <label for="trans-3">Longer than I expected?</label>
  </div>
</div> <!-- .radio-wrapper -->

больше объяснений по поводу упомянутых классов:

1. "строка": Класс "row" использует для понимания браузера, что мы хотим разделить содержимое, используя классы "col-md- *"

2. "Col-MD- ": когда мы используем «строку», сумма чисел в конце «col-md- » не должна быть больше 12. На самом деле каждая «строка» имеет 12 частей, которые мы можем отнести к разному содержимому. (теги div) через классы "col-md- *".

больше информации в сетке начальной загрузки ...

удачи!

Answer 3

.radio-wrapper{
  margin-bottom: 2%;
  margin-left: 45%;
}

.radio{
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0;
    display: inline-block !important;
    zoom: 1;
    vertical-align: middle;
}

.radio span{
    zoom: 1;
    text-align: center;
    vertical-align: middle;
}

.radio input[type=radio]{
    position: absolute;
    margin-left: -20px
}

Попробуйте этот код CSS для этого. Также удалите тег css с именем ".wrapper".