Estoy tratando de centrar verticalmente el texto "Tarjeta de crédito" que está al lado del número de tarjeta de crédito formateado previamente. ¿Cómo lo consigo para que el texto "Tarjeta de crédito" esté en línea con "**** **** **** 0000"?

<div class="form-group">
    <input type="radio" checked></label>
    <label class="radio-inline">
        Credit Card <pre style="margin-left: 8px; float: right; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>

Lo que produce esto:

enter image description here

1
Matt 30 sep. 2019 a las 11:20

3 respuestas

La mejor respuesta

Solo necesita eliminar float: right y agregar display: inline

0
ChickenSoups 30 sep. 2019 a las 08:31

Puedes echar un vistazo a esto:

<div class="form-group" align="center" >
    <input type="radio" checked>
    <label>
        Credit Card <pre style="margin-left: 8px; display: inline; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>
0
Rimon Arif 30 sep. 2019 a las 09:47

Mira esto:

<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <input type="radio" checked></label>
    <label class="radio-inline">
        Credit Card <pre style="margin-left: 8px; display: inline-block; vertical-align: middle; padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;">**** **** **** 0000</pre>
    </label>
</div>
</body>
</html>
0
Mohammadreza Yektamaram 30 sep. 2019 a las 08:21