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.
Dejo el código acá:
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.
Dejo el código acá:
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>