Не могу отцентровать по вертикали radio кнопку и label, как решить проблему?

Question

[Антон Вебсайтовский]

Всем привет.
Пытался через флексы сделать, но чет флексы на label и input не пашут, хотел от центровать в блоке input и label, при сжатии label переходит на вторую страницу.

А почему флексами отцентровать нельзя? по вертикали.

Саму проблемы нашел, если добавлять line-height: 14px;, то все идет криво если label в одну строку, если делается в две то ровно выглядит. если убрать line-height, то все ровно, но сам текст в label он широкий слишкоv, когда на вторую строку переходит, а я сузить хотел расстояние.

.ac-custom label {
  display: inline-block;
  position: relative;
  padding: 0 0 0 42px;
  vertical-align: top;
  cursor: pointer;
  line-height: 14px;
  font-size: 14px;
  color: #202226;
  font-weight: 600;
}

Рабочий пример тут:
https://jsfiddle.net/scayjzdq/3/

Comments

[topalek]

Как бы все ровняется, но то что в песочнице сделано - дичь дикая. Ответный вопрос, чем вам не угодили стандартные радио и чекбоксы? еесли не нравятся , то можно материалайз сделать https://materializecss.com/checkboxes.html

[Антон Вебсайтовский]

topalek, да в песочнице оно ровно как-то ну почти, там миллиметр сдвиг.
Чет я не пойму по ссылке где там скачать или посмотреть пример с кодом css. Там ток html вижу.

[Антон Вебсайтовский]

Вот допустим, попробовал бы, но не вижу где там css - https://materializecss.com/radio-buttons.html

[Ilya Olovyannikov]

Антон Вебсайтовский, https://materializecss.com/getting-started.html

[topalek]

Если нужен кастомный чекбокс или радиобатн, то поискал бы на кодпен
https://codepen.io/search/pens?q=Custom+chekbox

[topalek]

Дело не в миллиметрах, стандартные смотрятся красивее и уже выровненные

[Ankhena]

Флекс прекрасно работает для label
https://jsfiddle.net/Lvwp26t5/

[Антон Вебсайтовский]

Ankhena, о точно, а я чет мутил, и у меня как-то не работало, а почему как-то криво выходит, отступ сверху, от куда пока не пойму. перебрал все стили.

[Антон Вебсайтовский]

Хотя вот боли менее сделал.

https://jsfiddle.net/d8ophm9g/

Только чет какой-то отступ непонятный слева.

[Ankhena]

Антон Вебсайтовский, Какой непонятный отступ слева?
У ac-custom padding 20px и прозрачный инпут. Ничего непонятного не вижу.

[Антон Вебсайтовский]

Ankhena, прозрачный импут, так он же скрыт ! как он влияет тогда на этот отсуп, а паддинг это 20px, с этим ясно оно нужно.

[Ankhena]

Антон Вебсайтовский, Антон... чем он скрыт? Вы убрали визуальные эффекты через appearance none. И еще задали ему блочность и размеры 22 на 22. Ну вот они там и наблюдаются.

Погуглите про "паттерн visually-hidden" и доступное скрытие.

[Антон Вебсайтовский]

Ankhena, так у меня там было скрытие,
opacity: 0;
z-index: 100;

Но ты зачем-то убрала это.

[Ankhena]

Антон Вебсайтовский, ни прозрачность ни z-index НЕ МЕНЯЮТ занимаемого элементом места. Верните обратно эти свойства - ничего не изменится.

При кастомизации радио и чекбоксов сами инпуты скрываются специальным стилем, который называют visually-hidden. Вариантов этого паттерна несколько, можете воспользоваться любым из них.

[Антон Вебсайтовский]

Ankhena, да я уже сделал, ты как обычно ) если подсказываешь то обычно твои подсказки либо такие что приходиться потом другие проблемы решать, которые возникают при подсказках ) ну и еще все делаешь на половину или треть ))))

[Ankhena]

Антон Вебсайтовский,
Вопрос был как отцентрировать - я ответила. Потом откуда пустое место - я снова ответила откуда и даже как правильно его убирать. Не смотря на то, что это не имеет отношения к первоначальному вопросу.

На этом сервисе учатся решать проблемы. Как их решать - я говорю.
Если нужно сделать что-то полностью за вас, то это другой разговор. Тоже самое касается полных консультаций по каким-то свойствам, методам решений, ревью кода или аудита сайта.

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

Обычно они такие, потому что, чтобы из говно-кода из вопроса сделать нормальный код, нужно действительно много переделать. Да, итерациями. Иначе спрашивающий вообще не поймет что к чему и в следующий раз напишет точно такое же г.
;)

да я уже сделал

Отлично. Не забудьте проверить, чтобы всё это работало с клавиатуры и "читалось читалками".

[Антон Вебсайтовский]

Ankhena, да ладно, не оправдывай себя )