Usando el código del botón Bootstrap 5 con horizontally and vertically centered text y un ícono right aligned con múltiples botones en una situación flex box , ¿cómo detengo que el texto del botón se superponga al ícono cuando se ajusta, mantengo el ícono vertically centered cuando el texto del botón se ajusta? y mantener el texto del botón vertically center aligned cuando se ajusta?
Puede ver el código completo con los problemas de envoltura y superposición en este violín moviendo la columna central con el mouse y haciendo que el área de visualización sea más grande o más pequeña.
.custom-btn, .custom-btn:visited { position: relative; padding: 1.5rem 0.5rem; margin: 0.5rem 0.5rem; font-size: 0.95rem; border-radius: 0; line-height: 1.2rem; background-color: #c1c1c1; border-color: #c1c1c1; flex: 33%; text-transform: uppercase; color: #fff; box-sizing: border-box; letter-spacing: 0.8px; height: 70px; } .custom-btn:active, .custom-btn:hover { background-color: #7d7c7c; border-color: #787878; text-transform: uppercase; color: #fff; } .icon-arrow-new { position: absolute; right: 10px; width: 22px; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <a href="#" target="_blank" class="btn custom-btn">This Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>Hay otras formas de lograr esto, pero creo que los siguientes cambios le darán lo que busca.
Aumente el relleno izquierdo/derecho .custom-btn a un número mayor (Ej. 2.2rem) para borrar la flecha y use las propiedades flexibles para centrar el texto vertical y horizontalmente:
.custom-btn, .custom-btn:visited { position: relative; padding: 1.5rem 2.2rem; /* Increase left/right padding */ margin: 0.5rem 0.5rem; font-size: 0.95rem; border-radius: 0; line-height: 1.2rem; background-color: #c1c1c1; border-color: #c1c1c1; flex: 33%; text-transform: uppercase; color: #fff; box-sizing: border-box; letter-spacing: 0.8px; /* Add flex properties */ display: flex; align-items: center; justify-content: center; }Aquí hay un jsfiddle en funcionamiento bifurcado del violín de OP: jsfiddle.net/fd8ru69h
Iría con un diseño flexible completo (inline-flex). Parte del problema es que Bootstrap estaba sobrescribiendo algunas de sus reglas de estilo personalizadas. He agregado una segunda clase a los selectores para aumentar la especificidad.
.btn.custom-btn, .btn.custom-btn:visited { display: inline-flex; align-items: center; flex: 33%; position: relative; padding: 1.5rem 0.5rem; margin: 0.5rem 0.5rem; font-size: 0.95rem; border-radius: 0; background-color: #c1c1c1; border-color: #c1c1c1; text-transform: uppercase; color: #fff; box-sizing: border-box; letter-spacing: 0.8px; height: 70px; } .btn.custom-btn:active, .btn.custom-btn:hover { background-color: #7d7c7c; border-color: #787878; text-transform: uppercase; color: #fff; } .icon-arrow-new { width: 22px; margin-left: 8px; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <a href="#" target="_blank" class="btn custom-btn"> <span>This Section</span> <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /> </a> <a href="#" target="_blank" class="btn custom-btn"> <span>This<br>Section</span> <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /> </a>