Me enfrento a un problema de css en el que, con el tamaño de fuente predeterminado, el botón de opción está perfectamente alineado con el texto de la etiqueta, pero tan pronto como hago zoom o aumento el tamaño de fuente, el botón de opción ya no está alineado con el texto. Me gustaría diseñarlo para que el botón de opción siempre esté alineado con el texto, independientemente del tamaño de la fuente. ¿Qué ajuste necesito hacer en mi css para que esto suceda? https://codepen.io/Judoboy/pen/OJQqPEW?editors=1100
.label-container { display: inline-flex; justify-content: flex-start; align-items: start; } .label-text { display: flex; justify-items: center; align-items: center; height: 100%; } .prefix { font-weight: bold; font-size: 30px; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; } <label class="label-container"> <input type="radio" /> <div> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </div> </label>Pruebe la solución de cuadrícula , hacemos una cuadrícula de 2 x 2, la primera columna para el botón de opción y la celda vacía, la segunda para las etiquetas.
.label-container { display: inline-grid; grid-template-columns: auto 1fr; grid-auto-rows: auto; grid-template-areas: 'input prefix-text' 'empty label-text'; } input { grid-area: input; align-self: center; margin: 0; } .label-text:first-of-type { grid-area: prefix-text; align-self: center; } .label-text:last-of-type { grid-area: label-text; } .prefix { font-weight: bold; font-size: 30px; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; } <label class="label-container"> <input type="radio" /> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </label> .label-container { display: flex; flex-wrap: wrap; align-items: center; } input { margin: 0; position: relative; top: -8px; } .label-text { box-sizing: border-box; white-space: nowrap; line-height: 1; } .prefix { font-weight: bold; font-size: 30px; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; } <label class="label-container"> <input type="radio" /> <div> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </div> </label>