CODEWITHSUNDEEP
htmlcsslayout
Alisha S
Alisha S

Reputation: 3

How do I center all my elements?

I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?

I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.

<!DOCTYPE html>
 <html>
   <head>
    <meta charset="utf-8">
    <title>Business Title</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
   <header>
    <img class="mainImage" src="image/logo.png">
   </header>
  </head>

<body>
<div class="main">
  <h1>Simple Business.</h1>

<ul>
  <li><a href="#1">I need Option 1.</a></li>
  <li><a href="#2">I just need Option 2.</a></li>
  <li><a href="#3">I just need Option 3.</a></li>
  <li><a href="#4">I need Option 4.</a></li>
</ul>

  <footer>
  <h1>About THIS BUSINESS.</h1>
  <p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat. 
  </p>
</footer>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>
----------

**CSS:**

/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
 -moz-box-sizing: border-box; /* Firexfox */
 -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
 box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clear {
  clear: both;
}

.alignright {
    float: right; 
    padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
    float: left; 
    padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     color: #000;
     background-color: #ececec;
     font-size: 12px;
     line-height: 1.4;
     font-family: Helvetica, Arial, sans-serif;
     text-align: center;
}

h1 {
     font-family:'Arial Black';
     font-size: 4em;
     padding-top: 5px;
}

li {
     text-decoration: none;
     font-size: 2em;
     line-height: 2.5em;
     color: #FF48D0;
}

ul {
  list-style: none;
  padding: 0; 
}

.mainImage {
     width:75%;
     max-width:483px;
}

a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}

/******************************************
/* LAYOUT                   
/*******************************************/

.main {
     background-color: #FFF;
     margin:1em;
     margin-left: 2em;
     margin-right: 2em;
     float: center;
     max-width: 960px;

}

.about, p {
     float:center;
     max-width: 960px;
     padding-left: 1em;
     padding-right: 1em;
     text-align: justify;
 }

header {
 padding:10px;
}

footer {
 padding: 5px;
}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/

/* =======================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 930px) {

 .main {
   max-width: 95%;
margin: 0 auto; 
   text-align:center;
   padding-bottom: 1.5em;
float: none;
 }

 h1 {
      font-size: 2.5em;
      text-align: center;
   }

 li {
      font-size: 2em;
      line-height: 2.5em;
 }
}


@media only screen and (max-width: 480px) {
  .main {
     max-width: 95%;
  }

  h1 {
     font-size: 2em;
     text-align: center;
  }

  li {
     font-size: 1.4em;
 line-height: 2em;
  }

}

Upvotes: 0

Views: 50

Answers (3)

user2598812
user2598812

Reputation: 

.main {
  background-color: #FFF;
  max-width: 960px;
  display: table;
  margin: 0 auto;
}

Fiddle: Demo

Upvotes: 0

Lorenzo Cameroni
Lorenzo Cameroni

Reputation: 126

The classical way to center an element with CSS is to set left and right margin to auto

Your code should be

.main {
    background-color: #FFF;
    margin: 1em auto;
    max-width: 960px;
}

Upvotes: 0

Stewartside
Stewartside

Reputation: 20905

You just need to add margin: 0 auto; to your css for that element.

Like so:

.main {
    margin: 0 auto; 
}

This will centre the element automatically to the users browser.

CSS Margins

Upvotes: 2

Related Questions