Creé un enlace dentro de un contenedor, el contenedor tiene grid.
Ya usé text-align:center;
y align-items:center;
pero nada me funciona, quiero que el "Saber mas" se centre al contenedor ¿Porqué no sirve ninguna de estas etiquetas? Estoy usando un selector para el "boton" que es .saber-mas{}
intenté poniendo ahí dentro las etiquetas ya mencionadas pero nada, igual creé otro selector .tejuino-principal
a {}
y de igual manera poner las etiquetas, pero nada. Gracias
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Public Sans';
font-size: 1.6rem;
line-height: 2;
background-image: url("../img/background.jpeg");
background-size: COVER;
background-attachment: fixed;
height: 100%;
width: 100%;
}
/* Globales */
.contenedor {
max-width: 85%;
margin: 0 auto;
}
img {
max-width: 100%;
}
.centrar-texto {
text-align: center;
}
h1,
h2,
h3 {
font-family: 'Fredoka One', cursive;
}
.saber-mas {
color: blue;
text-decoration: none;
font-size: 2rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.saber-mas:hover {
color: red;
transition: .2s;
}
/* Globales */
/* Menu de navegación */
.logo {
width: auto;
height: 100%;
}
.contenedor-nav {
display: grid;
grid-template-columns: 30% 70%;
}
.navegacion-principal a {
text-decoration: none;
font-family: 'montserrat';
font-size: 2.5rem;
padding-left: 5rem;
color: white;
}
.navegacion-principal {
text-align: center;
padding-top: 3rem;
}
.navegacion-principal a:hover {
color: blue;
}
/* Menu de navegación */
.titulo {
font-family: 'Fredoka One', cursive;
text-align: center;
margin-top: -8rem;
margin-bottom: 5rem;
text-shadow: .2rem .2rem white;
}
/* RASPADO-PRINCIPAL */
.raspados-principal img {
padding: 1.5rem
}
.raspados-principal {
display: grid;
grid-template-columns: 30% 70%;
background-color: rgba(255, 255, 255, 0.726);
}
.texto-raspados {
padding-right: 2rem;
text-align: justify;
font-size: 1.7rem;
font-weight: 400;
}
.texto-raspados h2 {
color: rgb(12, 180, 96);
text-transform: uppercase;
text-shadow: .1rem .1rem red;
}
.almibar {
text-decoration: none;
font-family: cursive;
font-size: 2rem;
color: blue;
font-weight: bold;
}
.texto-raspados a:hover {
color: red;
}
/* RASPADO-PRINCIPAL */
/* TEJUINO PRINCIPAL */
.tejuino-principal {
display: grid;
grid-template-columns: 70% 30%;
background-color: rgba(255, 255, 255, 0.726);
margin-top: 4rem;
}
.tejuino-principal a {
}
.tejuino-principal img {
padding: 1.5rem;
grid-column: 2/3;
grid-row: ;
}
.texto-tejuino {
padding-right: 1.5rem;
padding-left: 1.5rem;
text-align: justify;
font-size: 1.7rem;
font-weight: 400;
grid-column: 1/2;
grid-row: 1/2;
}
.texto-tejuino h2 {
color: rgb(12, 180, 96);
text-transform: uppercase;
text-shadow: .1rem .1rem red;
}
/* TEJUINO PRINCIPAL */
/* TEPACHE PRINCIPAL */
.tepache-principal {
display: grid;
grid-template-columns: 30% 70%;
background-color: rgba(255, 255, 255, 0.726);
margin-top: 4rem;
}
.tepache-principal img {
width: 400px;
height: auto;
}
/* TEPACHE PRINCIPAL */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One|Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Public+Sans:400,700&display=swap" rel="stylesheet">
<title>Raspados Isla</title>
</head>
<body>
<div class="contenedor-nav">
<div class="logo">
<a href="index.html">
<img src="/img/logoo copia.png" alt="Logo Raspados Isla">
</a>
</div>
<nav class="navegacion-principal">
<a href="#" class="verde">Raspados</a>
<a href="#" class="verde">Tejuino</a>
<a href="#" class="blanco">Tepache</a>
<a href="#" class="rojo">Tuba</a>
<a href="#" class="rojo">Cerveza De Raíz</a>
</nav>
</div>
<h1 class="titulo">PRODUCTOS ARTESANALES</h1>
<main class="contenedor">
<section class="raspados-principal">
<img src="/img/diablitoo3.jpg" alt="Foto Diablito">
<div class="texto-raspados">
<h2>Los Raspados, Una tradicion muy Mexicana</h2>
</p>
Es un postre helado que consiste en mezclar hielo raspado con <a href="#" class="almibar">almibar</a> puedes elegir entre diferentes sabores de almibares, desde tan dulces que haran explotar tus papilas gustativas hasta sabores picosos
y acidos que te pondran a llorar. Sin duda el Chamoy es uno de los "dulces" mas representativos y conocidos en Mexico ¡tanto asi que hasta los niños de 3 años lo comen! y no puedes pasar un dia mas sin probar nuestro representativo Diablito!
elaborado con nuestro propio Chamoy. Para el Diablito puedes elegir entre diferentes sabores como son: Limon, Fresa, Mango, Piña, Tamarindo o Nanche despues de haberte decidido le ponemos hielo raspado, el almibar, jugo de limon natural,
Tajin, polvo Miguelito, sal de grano y una banderilla de Tamarindo <br> <a href="#" class="saber-mas">Saber más</a>
</p>
</div>
<!-- raspados-->
</section>
<section class="tejuino-principal">
<img src="/img/tejuinochido.jpg" alt="Foto Tejuino">
<div class="texto-tejuino">
<h2>Tejuino, bebida de los Dioses</h2>
<p>
El nombre Tejuino viene de la palabra náhuatl tecuín que significa latir. <br> El Tejuino es una bebida refrescante elaborada con Maíz, Piloncillo, Azucar moscabada, entre otros ingredientes. Se fermenta un par de dias y se sirve con
hielo, limon y sal en grano, la mezcla de estos ingredientes le da un toque agridulce perfecto para combatir el calor. Esta bebida proviene del norte de México que ademas de tener un delicioso sabor es benificioso para la salud ya
que cuenta con probióticos. Entre algunos pueblos del norte de México como los yaquis y tarahumaras, se prepara esta bebida con fines ceremoniales; la beben como ofrenda a las figuras sagradas, en fiestas que mezclan sus hermosas tradiciones
con el catolicismo. <br> <a href="#" class="saber-mas">Saber más</a>
</p>
</div>
<!--Tejuino-->
</section>
<section class="tepache-principal">
<img src="/img/Tepache.jpg" alt="Foto Tepache">
<div class="texto-tepache">
<h2>Tepache</h2>
<p>
</p>
</div>
</section>
</main>
</body>
</html>