0

Ya probé de varias formas y no logro centrarlo horizontalmente.

Aclaro que recién estoy empezando con CSS.

Gracias de antemano a quien pueda ayudar.

Centrar icono rojo

Dejo el código acá:

https://jsfiddle.net/Chakl22/L7rtzj18/12/

3
  • El código debe ir como texto en la pregunta. No en un enlace externo.
    – Jacobo
    Commented el 8 ago. 2022 a las 6:32
  • 1
    Prueba con display flex o grid en el css Commented el 8 ago. 2022 a las 6:38
  • @Jacobo Lo tuve que poner asi por que no me dejaba crear la publicacion, me decia "La publicacion parece tener solo codigo". Y no era asi.
    – Chakl22
    Commented el 8 ago. 2022 a las 7:26

1 respuesta 1

2

Buen día,

Puedes utilizar vertical-align: sub; y quitar display: inline-block; y text-align:center !important;

Ejemplo:

body {
    background-color: #141622;
}

.obtener-creditos {
    background-color: #1f2535 !important;
    color: orange;
    border: solid;
    margin: 8px;
    border-width: 1px;
    border-radius: 8px;
    position: inherit;
    text-align: center;
}

.obtener-creditos h1 {
    color: #ffffff;
    font-size: large;
    background-color: orange;
    margin-top: auto;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    text-shadow: 2px 2px 5px #616161;
}

.obtener-creditos h1:before {
    content: url('https://api.iconify.design/akar-icons/question-fill.svg?color=%23e10000&width=18');
    padding-right: 2px;
    vertical-align: sub;
}

.obtener-creditos p:before {
    content: url('https://api.iconify.design/fa-solid/hand-point-right.svg?color=%2392b700');
    font-family: 'Material-Design-Iconic-Font';
    color: #c3b400;
    padding-right: 2px;
}

.obtener-creditos span:before {
    content: url('https://api.iconify.design/fa-solid/coins.svg?color=%23c3b400');
    font-family: 'Material Icons';
    color: #c3b400;
    margin-right: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jijo de...</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/material-design-iconic-font.min.css">
    <script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>       
            <div class="obtener-creditos">
                <h1>Como obtener bla, bla...:</h1>
    
                <p>1 Tema = <span>2 bla,bla...</span></p>
                <p>1 Post = <span>1 bla,bla...</span></p>
            </div>
    </div>
</body>
</html>

1
  • Muchas gracias!👍
    – Chakl22
    Commented el 8 ago. 2022 a las 7:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.