Как отцентрировать radio input?

Question

[Артём]

Верстаю сайт. Локально все выглядит хорошо, не мог только отцентрировать radio input
Сделал демо на JSFiddle.
Когда нет карты местности, которая будет под адресом, сабмит уезжает куда-то не туда.
Предполагаю, что я неправильно использую grid.

Как должно быть.

Answer 1

[Андрей Хохлов]

Да, вы неправильно используете grid.
Колонки должны быть - в строках. Одна строка - не более 12 колонок.

.row
    .col
        .row
            .col
            .col
    .col

Для начала разделите блок на 2 колонки: с адресом и с формой.
Затем внутри колонки с формой уже делайте новые колонки (не забывайте что они в бутстрапе в процентах от родителя).

Что касается расположения радиобаттонов по центру - добавьте к их родителю (form-group) класс со свойством text-aligh: center.

UPD: если имеете в виду центрирование по вертикали, то добавьте радио свойство vertical-align: top

Comments

[Майк]

По-моему, vertical-align работать не будет, если только у контейнера нет свойства display: table-cell;

[Андрей Хохлов]

Майк: ознакомьтесь web-standards.ru/articles/vertical-align =)

[Майк]

Андрей Хохлов: Ну я о чём... тут оно работать не будет. Прочтите блок "Чем оно является на самом деле" и попробуйте на практике, применеть это свойство к input'у в решении Артёма. Или я не прав? ))

[Андрей Хохлов]

Майк: Может вам стоит сперва на практике попробовать?) Было: joxi.ru/v29NjG5S8olwAG Стало: joxi.ru/VrwMgz5f1PYD2X

[Майк]

Андрей Хохлов: Вижу на Хроме, но так двигается не input, а текст - как вариант. Но ИЕ не поддерживает :(

[Андрей Хохлов]

Майк:
Что мешает вам прежде чем писать - проверить свои идеи?

Нет, не меняется положение текста (label) из-за указания vertical-align:top;
Оно БЫЛО изменено из-за того что у radio был задан margin сверху при vertical-align по умолчанию, а теперь пришло в норму. https://jsfiddle.net/DTcHh/13411/

С чего бы ie не поддерживал старое css2 свойство? caniuse.com/#search=vertical-align
Тоже лгут?

Ок:
// я жестко зафиксировал margin чтобы быть уверенным что переопределил бутстраповские свойства

IE9: joxi.ru/L21RnGDuEKVzAX
В IE8 фиддл не работает :(

В современных браузерах всё ок, можете проверить

Так же рабочее решение обернуть input и label в блок с position:relative с padding-left, а для input указать position:absolute и разместить в области того самого padding;

Ваш вариант с display: table-cell для того чтобы был рабочим потребует ещё обертку с display:table;
Ну а городить span с float:left и в нем абсолютно-позиционированный инпут... Не хочу больше тратить время на эту тему и проверять, но что-то мне подсказывает что в таком случае придется все элементы строки делать плавающими, а самой строке добавлять clearfix. Иначе у нас сначала будут 2 span с радио внутри, а затем 2 label от них.

[Андрей Хохлов]

Ссылку на фидл забыл: https://jsfiddle.net/bb1t74g3/2/

[Майк]

Андрей Хохлов, а кто писал, что Вам требуется что-либо мне доказывать? )))) Андрей, спасибо за исследование )))

[Андрей Хохлов]

Майк: невозможно спокойно спать когда в интернете кто-то неправ))

[Майк]

Андрей Хохлов, Я вот сплю спокойно, когда кто-то неправ ))))

Answer 2

[Майк]

Radio Buttons центрируются (относительно вертикали), путём обёртки их в span, с применением к нему свойства float или display:table-cell (это зависит от того, как Вы делалили пару "input-label"). Если первым случаем, то сам SPAN делаем плавающим (float) и задаём ему значение длины (примерно в 15пх), после чего внутренний input должен быть позиционирован (position:absolute), и выравниваеме свойством margin: 3px 0 0 0 - примерно.

По поводу кнопки, тут та же история, можно использовать float:right или же заключить сие безобразие в контейнеры. То есть получается два контейнера, слева карта, справа кнопка. Опять же, всё это зависит от того, как Вы сделали вёрстку, может быть у вас слева большой блок и справа, а не так, что блоки идут один за другим...

Надеюсь, что помог...

Comments

[Майк]

Так, посмотрел фидл... По-моему, у вас в целом вёрстка немного неверно выполнена. По-моему, надо объединить контент блока слева в один общий блок и контент блока справа в другой. А то, для мобильной версии при моих правках всё будет хорошо, а вот для десктопа - нет. Там все блоки идут с float:left и размер, соотвественно по 50%

[Артём]

Выглядит это так:


Все, что ниже КОНТАКТЫ обернуто в один container и один row.
Сами контакты с картой в div col-sm-6. Форма так же как и на JSFiddle.

[Майк]

Артём: Это я понял, но идея с двумя контейнерами всё ещё актуальна. Андрей Хохлов написал верно про колонки...