0

Llevo mas de una hora pensando en como poder ajustar los cuadrados al lado central derecho. Están en la parte superior derecha y quiero que se ajusten al centro derecho que queden como la imagen de abajo.

Así me queda: introducir la descripción de la imagen aquí

Así necesito que me quede: introducir la descripción de la imagen aquí

Así es como he intentado: introducir la descripción de la imagen aquí

Este es mi index.html,

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="./asset/css/style.css">
</head>
<body style="background-color:#1195EA;">
    <main class = "container">
        <section class="flex flex-wrap" style="justify-content: flex-end;align-items: flex-end;flex-direction: column;">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </main>
</body>

y este es mi css.

/* elimina cualquier margen o padding que tenga por defecto un navegador*/
*{
padding: 0px;
margin:0px;
box-sizing: border-box;
}

.container{
width:100%;
height:100%;
}

.flex{
display: flex;
}

.flex-wrap{
 flex-wrap: wrap;
}

article{
width: 150px;
height: 100px;
margin: 10px;
background-color: #11EAD6;
 }
1
  • Agrega tu código como texto por favor, de otra manera es complicado ayudarte
    – user128299
    el 2 sep. 2020 a las 20:40

3 respuestas 3

0

Compañero, una forma sería envolviendo con un div el elemento que quieres centrar verticalmente y hacer uso del posicionamiento y de transform como te muestro a continuación en el código.

Index:

<body style="background-color:#1195EA;">
<main class = "container">
    <div class="centrar-verticalmente">
        <section class="flex flex-wrap" style="justify-content: flex-end;align-items: flex-end;flex-direction: column;">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </div>
</main>

CSS (añadir):

.centrar-verticalmente{
margin: 0;
position: absolute;
top: 50%;
left: 94%;
transform: translate(-50%, -50%);
}

Resultado: prueba

Hay varias formas de hacerlo, pero podría ser una opción para salir del paso :)

0

Existen varias maneras de centrar verticalmente, la que yo más suelo usar es con flexbox ya que creo que es la más fácil, pero también depende de de lo que necesites. Ya que lo que estas haciendo es maquetando toda la página, creo que sería mejor si usas grid para estructurar todos los elementos

.container {
  width:100%;
  height:100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.container > div {
  border: 1px solid black;
}

.header {
  grid-area: 1 / 1 / 2 / 5;
}

.content-left {
  grid-area: 2 / 1 / 3 / 4;
}

.content-rigth {
  grid-area: 2 / 4 / 3 / 5;
}

.footer {
  grid-area: 3 / 1 / 4 / 5;
}

/* elimina cualquier margen o padding que tenga por defecto un navegador*/
*{
padding: 0px;
margin:0px;
box-sizing: border-box;
}

article {
  width: 150px;
  height: 100px;
  margin: 10px;
  background-color: #11EAD6;
}
<main class="container">
  <div class="header"> </div>
  <div class="content-left"> </div>
  <section class="content-rigth">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <div class="footer"> </div>
</main>

0

Yo antes de mirar nada de flex me hice el tutorial de esta web. https://flexboxfroggy.com/#es

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.