TransWikia.com

intento colocar la imagen centrada y el texto debajo con media query

Stack Overflow en español Asked by chrlord on November 10, 2021

Cuando implemento la media query quiero que el texto quede debajo de la imagen y que la imagen a su vez el tamaño reduzca y quede centrada. pues esto no he logrado hacerlo he intentado lo que en el curso me han mostrado pero aun no logro hacer que la imagen quede centrada y el texto debajo de ella. son 4 DIV a los que debo colocar en bloque pero dentro de cada uno de ellos hay una imagen un titulo y un párrafo, el titulo y el párrafo deben quedar debajo de la imagen y la imagen debe quedar centrada. he puesto dentro del mismo 2 mas uno para el y el

para intentar conseguir el resultado pero no lo he logrado. una ayuda amigos por favor. en la parte de ofertas cuando este en determinado tamaño de pantalla ellos deben quedar en bloque y la imagen y texto como se los explique anteriormente pero no logro solucionarlo y solo debo usar CSS y HTML ademas cuando voy reduciendo la pantalla siempre hay una separación molesta entre los div

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Merienda One', cursive;
}

nav ul {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

a {
  color: #DED6C0;
  display: inline-block;
  text-indent: 5px;
  text-transform: uppercase;
  text-decoration: none;
}

a:hover {
  color: #D03B40;
  transition: color .5s;
}

.fondo1 {
  height: 700px;
  background-image: url(img/Fondo1.jpg);
  background-size: cover;
  position: relative;
}

.fondo1 img {
  margin: 15px 20px;
}

.fondo1 ul {
  position: absolute;
  top: 25px;
  right: 20px;
  margin: 15px 20px;
}

.fondo1 h1 {
  color: #F5F0ED;
  font-size: 44px;
  text-align: center;
  margin-top: 150px;
  text-transform: uppercase;
}

.fondo1 p {
  color: #DED6C0;
  font-size: 18px;
  text-align: center;
  margin: 40px 25px;
  line-height: 1.8rem;
}

.container-dc,
.container-rc {
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.container-dc h2,
.container-rc h2 {
  font-size: 28px;
  text-transform: uppercase;
  margin: 30px;
}

.domingos,
.contacto {
  color: #DED6C0;
  width: 50%;
  float: left;
  padding: 20px;
}

.domingos p,
.contacto p {
  color: #DED6C0;
  font-size: 18px;
  line-height: 1.8rem;
}

.celebra,
.reserva {
  color: #D03B40;
  width: 50%;
  float: left;
  padding: 20px;
}

.celebra p,
.reserva p {
  color: #D03B40;
  font-size: 18px;
  line-height: 1.8rem;
}

.domingos,
.contacto {
  background-color: #D03B40;
  height: 350px;
}

.celebra,
.reserva {
  background-color: #DED6C0;
  height: 350px;
}

.productos {
  height: 550px;
  background-image: url(img/Fondo2.jpg);
  background-size: cover;
  text-align: center;
}

.productos h2 {
  color: #F5F0ED;
  font-size: 44px;
  padding-top: 150px;
  text-transform: uppercase;
}

.productos p {
  color: #DED6C0;
  font-size: 18px;
  margin: 40px 25px;
  line-height: 1.8rem;
}

.productos a {
  border: 3px solid #DED6C0;
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 40px;
}

.oferta1,
.oferta2,
.oferta3,
.oferta4 {
  width: 50%;
  float: left;
}

h3 {
  font-size: 24px;
  text-transform: uppercase;
  color: #3C3C3B;
  margin-top: 50px;
}

.oferta1 img,
.oferta2 img {
  margin: 50px 15px 15px 30px;
  float: left;
}

.oferta3 img,
.oferta4 img {
  margin: 50px 15px 50px 30px;
  float: left;
}

.oferta1 p,
.oferta2 p,
.oferta3 p,
.oferta4 p {
  text-align: justify;
  font-size: 16px;
  margin: 15px 15px 0px 15px;
  line-height: 1.5rem;
}

.foot {
  height: 100px;
  background-color: #000000;
  color: #F5F0ED;
  text-align: center;
  padding-top: 40px;
}

@media screen and (max-width:500px) {
  .fondo1 h1 {
    font-size: 28px;
  }
  .fondo1 p {
    font-size: 14px;
  }
  nav {
    background-color: #F5F0ED;
    box-shadow: 0 10px 0 #F5F0ED, 0 20px 0 #F5F0ED;
    height: 5px;
    right: 25px;
    opacity: 0.9;
    position: absolute;
    top: 18px;
    width: 40px;
  }
  nav:before {
    background-color: transparent;
    content: '';
    display: block;
    height: 10px;
    width: 100%;
  }
  nav:hover,
  nav:focus,
  nav:active {
    opacity: 1;
  }
  nav:hover ul,
  nav:focus ul,
  nav:active ul {
    display: block;
  }
  nav ul {
    display: none;
    position: absolute;
    top: 15px;
  }
  nav li {
    border-top: 1px solid rgba(white, 0.2);
    display: block;
  }
  nav li:first-child {
    border: none;
  }
  nav li a {
    padding: .2em;
  }
  .container-dc h2,
  .container-rc h2,
  .productos h2 {
    font-size: 22px;
  }
  .productos h2 {
    padding-top: 60px;
  }
  .domingos,
  .celebra,
  .contacto,
  .reserva {
    display: blocks;
    width: 100%;
    height: auto;
  }
  .oferta1,
  .oferta2,
  .oferta3,
  .oferta4 {
    width: 100%;
    float: none;
  }
  .oferta1 img,
  .oferta2 img,
  .oferta3 img,
  .oferta4 img {
    width: 15%;
    height: 15%;
  }
  .oferta1 p,
  .oferta2 p,
  .oferta3 p,
  .oferta4 p {
    margin-top: 0px;
    clear: both;
  }
  .oferta4 p {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 799px) {
  h3 {
    font-size: 20px;
    text-align: center;
  }
  .fondo1 p,
  .container-dc p,
  .container-rc p,
  .productos p,
  .oferta1 p,
  .oferta2 p,
  .oferta3 p,
  .oferta4 p {
    font-size: 14px;
    line-height: 1.4rem;
    padding: 5px;
  }
  .oferta1,
  .oferta2,
  .oferta3,
  .ofert4 {
    font-size: 14px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cafe Oslo</title>
  <link rel="stylesheet" href="estilos.css">
  <link href="https://fonts.googleapis.com/css2?family=Merienda+One&display=swap" rel="stylesheet">
</head>

<body>
  <div class="oferta1">
    <img src="img/Icono1.png" alt="imagen1">
    <h3>Pan recién hecho</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta2">
    <img src="img/Icono2.png" alt="imagen2">
    <h3>Tartas para cada día</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta3">
    <img src="img/Icono3.png" alt="imagen3">
    <h3>Prueba nuestros dulces</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta4">
    <img src="img/Icono4.png" alt="imagen4">
    <h3>Ingredientes ecológicos</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
</body>

</html>
csshtml

One Answer

Puedes cambiar el contenedor (oferta*) a display:flex y flex-direction:column

Ademas de algunos ajustes de margen a las imagenes (margin: 0 auto)

Para que el encabezado (h3) aparezca al principio se asigna order: -1 para que aparezca antes de la imagen.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Merienda One', cursive;
}

nav ul {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

a {
  color: #DED6C0;
  display: inline-block;
  text-indent: 5px;
  text-transform: uppercase;
  text-decoration: none;
}

a:hover {
  color: #D03B40;
  transition: color .5s;
}

.fondo1 {
  height: 700px;
  background-image: url(img/Fondo1.jpg);
  background-size: cover;
  position: relative;
}

.fondo1 img {
  margin: 15px 20px;
}

.fondo1 ul {
  position: absolute;
  top: 25px;
  right: 20px;
  margin: 15px 20px;
}

.fondo1 h1 {
  color: #F5F0ED;
  font-size: 44px;
  text-align: center;
  margin-top: 150px;
  text-transform: uppercase;
}

.fondo1 p {
  color: #DED6C0;
  font-size: 18px;
  text-align: center;
  margin: 40px 25px;
  line-height: 1.8rem;
}

.container-dc,
.container-rc {
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.container-dc h2,
.container-rc h2 {
  font-size: 28px;
  text-transform: uppercase;
  margin: 30px;
}

.domingos,
.contacto {
  color: #DED6C0;
  width: 50%;
  float: left;
  padding: 20px;
}

.domingos p,
.contacto p {
  color: #DED6C0;
  font-size: 18px;
  line-height: 1.8rem;
}

.celebra,
.reserva {
  color: #D03B40;
  width: 50%;
  float: left;
  padding: 20px;
}

.celebra p,
.reserva p {
  color: #D03B40;
  font-size: 18px;
  line-height: 1.8rem;
}

.domingos,
.contacto {
  background-color: #D03B40;
  height: 350px;
}

.celebra,
.reserva {
  background-color: #DED6C0;
  height: 350px;
}

.productos {
  height: 550px;
  background-image: url(img/Fondo2.jpg);
  background-size: cover;
  text-align: center;
}

.productos h2 {
  color: #F5F0ED;
  font-size: 44px;
  padding-top: 150px;
  text-transform: uppercase;
}

.productos p {
  color: #DED6C0;
  font-size: 18px;
  margin: 40px 25px;
  line-height: 1.8rem;
}

.productos a {
  border: 3px solid #DED6C0;
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 40px;
}

.oferta1,
.oferta2,
.oferta3,
.oferta4 {
  width: 50%;
  float: left;
}

h3 {
  font-size: 24px;
  text-transform: uppercase;
  color: #3C3C3B;
  margin-top: 50px;
}

.oferta1 img,
.oferta2 img {
  margin: 50px 15px 15px 30px;
  float: left;
}

.oferta3 img,
.oferta4 img {
  margin: 50px 15px 50px 30px;
  float: left;
}

.oferta1 p,
.oferta2 p,
.oferta3 p,
.oferta4 p {
  text-align: justify;
  font-size: 16px;
  margin: 15px 15px 0px 15px;
  line-height: 1.5rem;
}

.foot {
  height: 100px;
  background-color: #000000;
  color: #F5F0ED;
  text-align: center;
  padding-top: 40px;
}

@media screen and (max-width:500px) {
  .fondo1 h1 {
    font-size: 28px;
  }
  .fondo1 p {
    font-size: 14px;
  }
  nav {
    background-color: #F5F0ED;
    box-shadow: 0 10px 0 #F5F0ED, 0 20px 0 #F5F0ED;
    height: 5px;
    right: 25px;
    opacity: 0.9;
    position: absolute;
    top: 18px;
    width: 40px;
  }
  nav:before {
    background-color: transparent;
    content: '';
    display: block;
    height: 10px;
    width: 100%;
  }
  nav:hover,
  nav:focus,
  nav:active {
    opacity: 1;
  }
  nav:hover ul,
  nav:focus ul,
  nav:active ul {
    display: block;
  }
  nav ul {
    display: none;
    position: absolute;
    top: 15px;
  }
  nav li {
    border-top: 1px solid rgba(white, 0.2);
    display: block;
  }
  nav li:first-child {
    border: none;
  }
  nav li a {
    padding: .2em;
  }
  .container-dc h2,
  .container-rc h2,
  .productos h2 {
    font-size: 22px;
  }
  .productos h2 {
    padding-top: 60px;
  }
  .domingos,
  .celebra,
  .contacto,
  .reserva {
    display: blocks;
    width: 100%;
    height: auto;
  }
  .oferta1,
  .oferta2,
  .oferta3,
  .oferta4 {
    width: 100%;
    float: none;
    display: flex;
    flex-direction: column;
  }
  .oferta1 img,
  .oferta2 img,
  .oferta3 img,
  .oferta4 img {
    width: 15%;
    height: 15%;
    display: block; 
    margin: 0 auto;
  }
  .oferta1 p,
  .oferta2 p,
  .oferta3 p,
  .oferta4 p {
    margin-top: 0px;
    clear: both;
  }
  .oferta4 p {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 799px) {
  h3 {
    font-size: 20px;
    text-align: center;
    order: -1;

  }
  .fondo1 p,
  .container-dc p,
  .container-rc p,
  .productos p,
  .oferta1 p,
  .oferta2 p,
  .oferta3 p,
  .oferta4 p {
    font-size: 14px;
    line-height: 1.4rem;
    padding: 5px;
  }
  .oferta1,
  .oferta2,
  .oferta3,
  .ofert4 {
    font-size: 14px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cafe Oslo</title>
  <link rel="stylesheet" href="estilos.css">
  <link href="https://fonts.googleapis.com/css2?family=Merienda+One&display=swap" rel="stylesheet">
</head>

<body>
  <div class="oferta1">
    <img src="img/Icono1.png" alt="imagen1">
    <h3>Pan recién hecho</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta2">
    <img src="img/Icono2.png" alt="imagen2">
    <h3>Tartas para cada día</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta3">
    <img src="img/Icono3.png" alt="imagen3">
    <h3>Prueba nuestros dulces</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
  <div class="oferta4">
    <img src="img/Icono4.png" alt="imagen4">
    <h3>Ingredientes ecológicos</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum qui dolorem tempore tempora quidem et sed minima, sint dolore maiores. Voluptatem vel qui tenetur pariatur debitis harum nam ad magni!</p>
  </div>
</body>

</html>

Answered by F.Igor on November 10, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP