0

sigo haciendo esta pagina y me gustaria saber como podría alinear el Sushi en el centro, para que quede abajo pero exactamente en el centro de Onigiri. Por cuestión de estetica simplemente introducir la descripción de la imagen aquí

Lo que quiero es algo asi, que quede el Sushi alineado al centro, y no al costado.

introducir la descripción de la imagen aquí

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6em;
  margin: 0%;
}

h1 {
  font-size: 2rem;
  line-height: 1.3em;
}

p {
  margin-bottom: 1.6em;
}

.container {
  width: 85%;
  max-width: 850px;
  margin: 0 auto;
}

.header {
  background: #121212;
  color: white;
  padding: 0rem 0;
  font-family: 'Koulen', cursive;
  z-index: 1;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
}

.header a {
  color: white;
  text-decoration: none;
}

.logo-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.menu-icon {
  display: none;
}

.navigation {
  justify-content: end;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li {
  display: inline-block;
}

.navigation ul li a {
  display: block;
  padding: 0.5rem 1rem;
  transition: all 0.4s linear;
  border-radius: 5px;
}

.navigation ul li a:hover {
  background-color: #4a4a4a;
}

.main {
  padding-top: 7rem;
}

.logoimagen {
  display: flex;
  width: 100px;
}

.sushi {
  display: block;
}

.banner {
  width: 100%;
  height: 600px;
  animation: banner 10s infinite linear alternate;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  font-family: 'Roboto Condensed', sans-serif;
}

@keyframes banner {
  0%,
  20% {
    background-image: url(./sushi1.jpg);
  }
  25%,
  45% {
    background-image: url(./sushi2.jpg);
  }
  50%,
  70% {
    background-image: url(./sushi3.jpg);
  }
  75%,
  100% {
    background-image: url(./sushi4.jpg);
  }
}

.capa {
  width: 100%;
  padding-top: 150px;
  height: 75%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6)
}

.info {
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  text-align: center;
}

.info h1 {
  color: white;
  font-size: 45px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.info p {
  color: #c8c8c8;
  line-height: 1.7;
  margin-bottom: 30px;
}

.info a {
  color: #fff;
  text-decoration: none;
  background: #3088e0;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
}

.parrafo1 {
  margin: 0;
}

.parrafo2 {
  margin: 0;
}

@media only screen and (max-width: 787px) {
  .menu-icon {
    display: block;
    cursor: pointer;
    padding: 0rem 1rem;
  }
  .navigation {
    width: 100%;
    margin-top: 1rem;
  }
  .navigation ul {
    display: none;
  }
  .navigation ul.show {
    display: block;
  }
  .navigation ul li {
    display: block;
  }
  .navigation ul li a {
    display: block;
    padding: 0.5rem 0rem;
    transition: all 0.4s linear;
    border-radius: 5px;
  }
  .navigation ul li a:hover {
    background-color: #4a4a4a;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Onigiri Sushi</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <header class="header">

    <div></div>
    <div class="container logo-nav-container">
      <div class="logoimagen">
        <img class="logo" src="onigiri.png" alt="" width="120px" height="120px">
        <h1 class="">Onigiri Sushi</h1>
      </div>
      <span class="menu-icon">Ver menu</span>
      <nav class="navigation">
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Nosotros</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Servicios</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>

    </div>

    <link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap" rel="stylesheet">

  </header>

  <main class="main">

    <div class="banner">
      <div class="capa">
        <div class="info">
          <h1>¿Tenés antojo de Sushi?</h1>
          <p class="parrafo2">¡Nosotros también, mira nuestro menú y deleitate con nuestra selección de los mejores rolls solo para vos!</p>
          <a href="#">Ver mas</a>
        </div>
      </div>
    </div>

  </main>

  <footer class="footer">
    <div class="container">
      <p>Página diseñada por Santino Fernandez</p>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="scripts.js"></script>
</body>

</html>

1
  • Ambas páginas contienen texto distinto e imágenes de fondo distintas. No se a lo que te refieres exactamente, si al texto a la imagen. El texto lo veo centrado en ambas tambien, no se ver que queda al costado como dices.
    – masterguru
    Commented el 21 may. 2022 a las 2:37

2 respuestas 2

0

Tienes un div que envuelve la imagen y el texto del logo, cuya clase el logoimagen. Pues bien, justo a ese div le puedes asignar la propiedad text-align: center; en el CSS y con eso sería suficiente.

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6em;
  margin: 0%;
}

h1, h2 {
  font-size: 2rem;
  line-height: 1.3em;
}

p {
  margin-bottom: 1.6em;
}

.container {
  width: 85%;
  max-width: 850px;
  margin: 0 auto;
}

.header {
  background: #121212;
  color: white;
  padding: 0rem 0;
  font-family: 'Koulen', cursive;
  z-index: 1;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
}

.header a {
  color: white;
  text-decoration: none;
}

.logo-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.menu-icon {
  display: none;
}

.navigation {
  justify-content: end;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li {
  display: inline-block;
}

.navigation ul li a {
  display: block;
  padding: 0.5rem 1rem;
  transition: all 0.4s linear;
  border-radius: 5px;
}

.navigation ul li a:hover {
  background-color: #4a4a4a;
}

.main {
  padding-top: 7rem;
}

.logoimagen {
  display: flex;
  width: 100px;
  /*Justo acá*/
  text-align: center;
}

.sushi {
  display: block;
}

.banner {
  width: 100%;
  height: 600px;
  animation: banner 10s infinite linear alternate;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  font-family: 'Roboto Condensed', sans-serif;
}

@keyframes banner {
  0%,
  20% {
    background-image: url(./sushi1.jpg);
  }
  25%,
  45% {
    background-image: url(./sushi2.jpg);
  }
  50%,
  70% {
    background-image: url(./sushi3.jpg);
  }
  75%,
  100% {
    background-image: url(./sushi4.jpg);
  }
}

.capa {
  width: 100%;
  padding-top: 150px;
  height: 75%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6)
}

.info {
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  text-align: center;
}

.info h1 {
  color: white;
  font-size: 45px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.info p {
  color: #c8c8c8;
  line-height: 1.7;
  margin-bottom: 30px;
}

.info a {
  color: #fff;
  text-decoration: none;
  background: #3088e0;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
}

.parrafo1 {
  margin: 0;
}

.parrafo2 {
  margin: 0;
}

@media only screen and (max-width: 787px) {
  .menu-icon {
    display: block;
    cursor: pointer;
    padding: 0rem 1rem;
  }
  .navigation {
    width: 100%;
    margin-top: 1rem;
  }
  .navigation ul {
    display: none;
  }
  .navigation ul.show {
    display: block;
  }
  .navigation ul li {
    display: block;
  }
  .navigation ul li a {
    display: block;
    padding: 0.5rem 0rem;
    transition: all 0.4s linear;
    border-radius: 5px;
  }
  .navigation ul li a:hover {
    background-color: #4a4a4a;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Onigiri Sushi</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <div class="container logo-nav-container">
      <div class="logoimagen">
        <img class="logo" src="onigiri.png" alt="" width="120px" height="120px">
        <h2>Onigiri Sushi</h2>
      </div>
      <span class="menu-icon">Ver menu</span>
      <nav class="navigation">
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Nosotros</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Servicios</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </div>
    <link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap" rel="stylesheet">
  </header>
  <main class="main">
    <div class="banner">
      <div class="capa">
        <div class="info">
          <h1>¿Tenés antojo de Sushi?</h1>
          <p class="parrafo2">¡Nosotros también, mira nuestro menú y deleitate con nuestra selección de los mejores rolls solo para vos!</p>
          <a href="#">Ver mas</a>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer">
    <div class="container">
      <p>Página diseñada por Santino Fernandez</p>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="scripts.js"></script>
</body>
</html>

Notas:

  • Ten cuidado con el cierre de etiquetas... <nav> por ejemplo, no está cerrada en tu código.
  • No recominedo el uso de la etiqueta h1 en el logo ya que está destinada a los títulos en el body y sólo debes agregar uno por página. El uso indebido de las etiquetas puede afectar el SEO.
0
text-align:center;

Solo debes agregar eso a tu elemento de h1 y todo el cuerpo del selector se va a centrar

0

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.