1

tengo los siguientes estilos:

    /*Estilos para movil*/

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* Para tabletas: */
    .col-m-1 {
        width: 8.33%;
    }
    .col-m-2 {
        width: 16.66%;
    }
    .col-m-3 {
        width: 25%;
    }
    .col-m-4 {
        width: 33.33%;
    }
    .col-m-5 {
        width: 41.66%;
    }
    .col-m-6 {
        width: 50%;
    }
    .col-m-7 {
        width: 58.33%;
    }
    .col-m-8 {
        width: 66.66%;
    }
    .col-m-9 {
        width: 75%;
    }
    .col-m-10 {
        width: 83.33%;
    }
    .col-m-11 {
        width: 91.66%;
    }
    .col-m-12 {
        width: 100%;
    }
}


/*Se recomienda hacer el diseño pensando principalmente en moviles, el codigo quedaria así*/

@media only screen and (min-width: 768px) {
    /*Estilos para desktop*/
    .col-1 {
        width: 8.33%;
    }
    .col-2 {
        width: 16.66%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.33%;
    }
    .col-5 {
        width: 41.66%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.33%;
    }
    .col-8 {
        width: 66.66%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.33%;
    }
    .col-11 {
        width: 91.66%;
    }
    .col-12 {
        width: 100%;
    }
}

Quisiera ocupar tres rejillas que en este caso seria col-3 y col-m3 pero que dichas rejillas fueran exactamente las del centro. ¿Podrían ayudarme? Agregando más detalles, tengo la siguiente página: introducir la descripción de la imagen aquí

Pero quisiera generar unos espacios laterales como se muestran a continuación en la siguiente imagen: introducir la descripción de la imagen aquí

2
  • Disculpa, no tienes una captura de pantalla para saber que intentas alinear, y como esta actualmente Commented el 21 mar. 2017 a las 23:38
  • Creo que vas a necesitar que esos elementos vayan dentro de un contenedor (por ejemplo, algo como .row en Bootstrap)
    – Alvaro Montoro
    Commented el 22 mar. 2017 a las 2:43

2 respuestas 2

1

Tienes una header y un footer normal, de toda la vida, y lo que quieres es centrar el contenido de main, pues tienes que tener una estructura html5 tal que:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Inicio | Fernando Pacheco</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
    <header class="cabecera">
        <h1>Mi cabecera con su menú</h1>
    </header>
    <main class="parteCentral">
                    <h3>Soy una seccion</h3>
        <p>Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección.  Soy un parrafo de una sección. Soy un parrafo de una sección. Soy un parrafo de una sección.</p>
    </section>
    </main>
    <footer class="pie">
        <p>Mi footer</p>
    </footer>
</body>
</html>

Y el estilo en CSS3, algo simple para que puedas ver el resultado:

 *{
    border: 0;
    margin: 0;
    padding: 0;
}

.cabecera{
    background: #828282;
    padding: 30px 20px;
    text-align: center;
}

.parteCentral{
    background: #BDCFB9;
    max-width: 80%;
    margin: auto;
}

.pie{
    background: #313630;
    color: #FFFFFF;
    padding: 10px 5px;
    text-align: center;
}

El resultado que obtienes es:

introducir la descripción de la imagen aquí

La gracia está en que tienes meter el contenido en un cotenedor como te dicen en los comentarios y luego darle un max < 100%, por ejemplo max-width: 80%; y con un margin: auto; y ya lo tienes.

0

Lo que estás buscando es lo que normalmente le nombran container. Esto no es nada más que un elemento HTML, comúnmente un div con una clase container.

Ej. <div class="container"></div>.

Dicha clase nos ayuda a mantener el contenido al flujo que deseamos y mantenerlo constante en nuestra página.

La opción más sencilla para crear este contenedor es usar las siguientes propiedades:

.container {
    width: 85%;
    margin: 0 auto;
}

Aplicándolo a tu marcado, con el header dentro del contenedor, quedaría algo así:

body {
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  width: 85%;
  margin: 0 auto;
  /*Solo por motivos de presentación*/
  flex: 3;
  display: flex;
  flex-direction: column;
  /*--------------------------------*/
}

header {
  background-color: mediumseagreen;
  flex: 1;
}

.slider {
  background-color: turquoise;
  flex: 3;
}

section {
  background-color: dodgerblue;
  flex: 5;
}

footer {
  background-color: violet;
  flex: 1;
}
<main>
  <div class="container">
    <header>
      Header
    </header>
    <div class="slider">
      Slider
    </div>
    <section>
      Contenido
    </section>
  </div>
  <footer>
    Footer
  </footer>
</main>

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.