CODEWITHSUNDEEP
css
fields
fields

Reputation: 59

CSS - how to center site for large screens (without bootstrap)

Maybe this has already been answered, but couldn't find the solution neither in Google, neither in Stackoverflow. Newbie here.

I use a large screen at home and rarely use the browser in fullscreen. But today i tried to see how a website i'm testing would look, and it's ugly. In normal size browser it's ok, but in a big screen it's all on the left. How can i center it for large screens?

I know i could fill it and make things bigger for large screens, but i want to learn how to do this in case i need it.

Here is my HTML and CSS files

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>


<header class="col-12">
  <!--logo-->
  <div class="col-3 logo">
    <img alt="logo" src="logo-lxfcl-new.png" width="210" height="54">
  </div>

  <div class="col-9 topMenu">
    <h4>Welcome</h4>
    <!--top menu-->
    <nav>
      <ul>
        <li>Home</li>
        <li>Annonces</li>
        <li>Comment faire</li>
        <li>contacts</li>
      </ul>
    </nav>
  </div>
</header>

<!--left menu-->
<nav class="col-3 sidemenu">
    <ul>
      <li>Ateliers</li>
      <li>Associations</li>
    </ul>
</nav>

<main class="col-9 sectionColor">
  <section>
    sdfsdefwef
  </section>
</main>

<!--footer-->
<footer class="col-12">
  copyright 
</footer>


/*defining the grid system*/
* {
box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%; max-width: 300px;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%; max-width: 900px;}
.col-9 {width: 75%; max-width: 900px;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%; max-width: 1200px;}

[class*="col-"] {
float: left;
padding: 10px;
border: solid 1px;
}

.row::after {
content: "";
clear: both;
display: table;
}
/*-------------------------------------*/

header, aside, footer, main, nav, section {
display: block;
}
/*---------------------------------------------*/



body {
font-family: roboto;
font-size: 1em;
line-height: 150%;
background-color: #dddddd;
margin: 0 auto;
}

.logo {
float:left;
}

.logo img {
display: block;
margin-left: auto;
margin-right: auto;
}

.topMenu {
float:left;
clear: right;
padding: 0px;
text-align: center;
}

.topMenu nav,
.topMenu h4 {
padding: 0;
}

.topMenu li {
display: inline;
 list-style-type: none;
 color: #5e2f2f;
 padding-right: 30px;
 }



 .sidemenu li {
 border-bottom: dotted 1px #5e2f2f;
 list-style-type: none;
 line-height: 200%;
 color: #72a1e7;
 margin-left: -40px; /*this is because of the default webkit-padding*/
 max-width: 300px;
 }



nav {
 clear: left;
 padding-top: 10px;
 font-size: 0.9em;
}



.sectionColor {
background-color: white;
}



footer {
clear: both;
text-align: right;
padding-right: 20px;
font-style: italic;
font-size: 0.8em;
}

Upvotes: 0

Views: 2258

Answers (5)

Bartosz Gawron
Bartosz Gawron

Reputation: 187

I would use newest centering CSS invention which is FLEXBOX Try applying the following code 

.container {
    display: flex;
    align-items: center;
    justify-content: center;}

In comparison to older CSS centering methods is effortless.

Upvotes: 1

jaboja
jaboja

Reputation: 2237

If you need to center only horizontally do as Plenarto said, wrap it in some <div> with width or max-width set in CSS and margin: 0 auto.

If you need to center everything vertically too, you need to place it in a table cell or something styled like a table cell. I use following trick in such cases:

html, body { margin: 0; padding: 0; width: 100%; height: 100% }
html { display: table }
body { display: table-cell; vertical-align: middle }

Upvotes: 0

Mike
Mike

Reputation: 1999

First of all you are missing the body element. When you fix this, you can style your body as:

body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Upvotes: 0

Plenarto
Plenarto

Reputation: 649

You can wrap your whole page in a .wrapper class, give .wrapper max-width value in px - for example 1200px, and then center it with: margin: 0 auto.

Upvotes: 7

Michael Coker
Michael Coker

Reputation: 53709

Easiest way is probably to introduce a wrapper to wrap all of the content on the site, make the width match the widest width you have in your columns (.col-12 - and you can remove that width on .col-12 now), and use margin: auto; to center it horizontally.

/*defining the grid system*/
* {
box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%; max-width: 300px;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%; max-width: 900px;}
.col-9 {width: 75%; max-width: 900px;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.wrap {
  max-width: 1200px;
  margin: auto;
}

[class*="col-"] {
float: left;
padding: 10px;
border: solid 1px;
}

.row::after {
content: "";
clear: both;
display: table;
}
/*-------------------------------------*/

header, aside, footer, main, nav, section {
display: block;
}
/*---------------------------------------------*/



body {
font-family: roboto;
font-size: 1em;
line-height: 150%;
background-color: #dddddd;
margin: 0 auto;
}

.logo {
float:left;
}

.logo img {
display: block;
margin-left: auto;
margin-right: auto;
}

.topMenu {
float:left;
clear: right;
padding: 0px;
text-align: center;
}

.topMenu nav,
.topMenu h4 {
padding: 0;
}

.topMenu li {
display: inline;
 list-style-type: none;
 color: #5e2f2f;
 padding-right: 30px;
 }



 .sidemenu li {
 border-bottom: dotted 1px #5e2f2f;
 list-style-type: none;
 line-height: 200%;
 color: #72a1e7;
 margin-left: -40px; /*this is because of the default webkit-padding*/
 max-width: 300px;
 }



nav {
 clear: left;
 padding-top: 10px;
 font-size: 0.9em;
}



.sectionColor {
background-color: white;
}



footer {
clear: both;
text-align: right;
padding-right: 20px;
font-style: italic;
font-size: 0.8em;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<div class="wrap">

<header class="col-12">
  <!--logo-->
  <div class="col-3 logo">
    <img alt="logo" src="logo-lxfcl-new.png" width="210" height="54">
  </div>

  <div class="col-9 topMenu">
    <h4>Welcome</h4>
    <!--top menu-->
    <nav>
      <ul>
        <li>Home</li>
        <li>Annonces</li>
        <li>Comment faire</li>
        <li>contacts</li>
      </ul>
    </nav>
  </div>
</header>

<!--left menu-->
<nav class="col-3 sidemenu">
    <ul>
      <li>Ateliers</li>
      <li>Associations</li>
    </ul>
</nav>

<main class="col-9 sectionColor">
  <section>
    sdfsdefwef
  </section>
</main>

<!--footer-->
<footer class="col-12">
  copyright 
</footer>
  
</div>

Upvotes: 0

Related Questions