Home Unable to center div properly
Reply: 3

Unable to center div properly

Zach Bresser
1#
Zach Bresser Published in 2017-12-08 00:19:10Z

I am trying to center a div inside of a div. Instead, its shaded to the right. I have tried all combinations of positions. I tried everything I found in other threads and have not been able to fix this. This is how it looks: https://jsfiddle.net/L13qa1tr/

content_page.html:

<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

Relevant CSS, content_page.css:

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  width: 100%;
  height: 100%;
  color: white;
  background-color: black; }

html {
  width: 100%;
  height: 100%; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0 auto;
}
#main-content {
    position: relative;
    top: 32px;
    left: 88px;
    right: 88px;
    bottom: 32px;
    background-color: #E1E1E1;
    height: auto;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}

I can post any other information needed, just let me know. If anyone can point me in the right direction that would be great. The part that also confuses me is that the width of the inner div should be 100% so it would make sense if it took up all of the space, but in this case it isn't taking up enough.

Michelle Cantin
2#
Michelle Cantin Reply to 2017-12-08 00:28:19Z

There is a lot of unnecessary code in there. I removed a lot of it.

The margin: 0 auto; needs to be placed inside the #main-content to center it instead of the #wrapper. I changed the width to show you that it works.

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  color: white;
  background-color: black; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    padding: 5px;
}
#main-content {
    position: relative;
    top: 32px;
    background-color: #E1E1E1;
    box-sizing: border-box;
    margin: 0 auto;
    width: 50%;
}
<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

davvv
3#
davvv Reply to 2017-12-08 00:34:13Z

If you are trying to center your #main-content div, here is how you can do it.

#main-content {
    position: relative;
    width: 80%;
    width:calc( 100% - 88px - 88px);
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    height: auto;
}

The calc method is just using your left and right peramters. You can remove this and just use the percent, which will still align it in the middle.

To center a div you need to set a width, followed by automatic margins on the left and right:

margin-left: auto;
margin-right: auto

See this updated fiddle.

Dhaval Jardosh
4#
Dhaval Jardosh Reply to 2017-12-08 00:51:58Z

Well that was a part of your issue, that you were moving the div using

position:relative and adding top,left,right and bottom.

Instead all you are supposed to add is margin:auto. Width is reduced just for bring the content in the center.

#main-content {
  width:600px;
  margin:auto;
  background-color: #E1E1E1;
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.345053 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO