Skip to main content
se eliminó 1 carácter en el cuerpo
Origen Enlace
user22721
user22721
body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>
body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>
body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>
body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>
se añadieron 28 caracteres en el cuerpo
Origen Enlace
user22721
user22721

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al divdiv (en este caso tu aside) asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

Para centrar una imagen podemos asignarle display: block y margin: 0 auto, esto la centrará en su contenedor.

En el siguiente ejemplo le asigno la clase responsive-image a la imagen y agrego las propiedades que mencioné

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">


Para centrar tu banner podemos usar la magia del flexbox, declarando un contenedor y asignandole un alto, y con align-items: center; justify-content: center;, de esta forma

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al div asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

Para centrar una imagen podemos asignarle display: block y margin: 0 auto, esto la centrará en su contenedor.

En el siguiente ejemplo le asigno la clase responsive-image a la imagen y agrego las propiedades que mencioné

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">


Para centrar tu banner podemos usar la magia del flexbox, declarando un contenedor y asignandole un alto, y con align-items: center; justify-content: center;, de esta forma

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al div (en este caso tu aside) asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

Para centrar una imagen podemos asignarle display: block y margin: 0 auto, esto la centrará en su contenedor.

En el siguiente ejemplo le asigno la clase responsive-image a la imagen y agrego las propiedades que mencioné

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">


Para centrar tu banner podemos usar la magia del flexbox, declarando un contenedor y asignandole un alto, y con align-items: center; justify-content: center;, de esta forma

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

se añadieron 1154 caracteres en el cuerpo
Origen Enlace
user22721
user22721

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al div asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">
.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>

Edicion

Para tu caso en específico puedes utilizar flex, no necesitas que tu imagen del banner ocupe tanto espacio, puedes hacerla mas pequeña y tener tu foto y el banner en la misma linea, y al div asigarle el color de tu banner.

Puedes asginarle los anchos que desees a tus imágenes para lograr que quede como tu gustes

body {
  margin: 0;
  padding: 0;
}

.arriba {
  display: flex;
  background-color: rgb(0, 163, 232);
  align-items: center;
  justify-content: center;
}

.foto {
  max-width: 1.5rem;
  height: auto;
  margin-right: 0.5rem;
}

.banner {
  max-width: 7.5rem;
  height: auto;
}
<aside class="arriba">
  <h3></h3>
  <p>
    <img class="foto" src="https://alexandrawp.herokuapp.com/imagenes/ale2.jpg" alt="Foto">
    <img class="banner" src="https://i.sstatic.net/bWuPe.png" alt="Banner">
  </p>
</aside>


Para que tu imagen se adapte al ancho de la pantalla puedes asignarle el width: 100% o max-width: 100%, lo que hace el primero es decirle que la imagen sea de todo el ancho de su contenedor, que no serviría mucho si la imagen es mas pequeña que este ya que puede perder su definición, el segundo nos dice que su ancho máximo puede ser del tamaño de su contenedor, lo que la hará responsiva y no perderá su definición.

.responsive-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
<img class="responsive-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Cotopaxi_volcano_2008-06-27T1322.jpg/320px-Cotopaxi_volcano_2008-06-27T1322.jpg" alt="Cotopaxi">
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #7cec7d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  color: #fff;
  padding: 1rem;
  text-align: center;
  background-color: #7ec1f2;
}
<div class="container">
  <div class="content">
    Estoy centrado
  </div>
</div>
Origen Enlace
user22721
user22721
Loading