Reputation: 181
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.
Upvotes: 0
Views: 57
Reputation: 7299
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;
}
Upvotes: 0
Reputation: 792
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.
Upvotes: 1
Reputation: 573
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>
Upvotes: 2