After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
Related
I am having a really hard time with getting this image centered.
I have tried the following:
margin: 0 auto;
display: block;
text-align: center;
I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.
Why is this image not centering?
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
I had also tried the below but it still doesn't work.
.approach-tablet {
bottom: 0;
position: absolute;
/*left: 50%;*/
}
img.approach-tablet {
display: block;
margin: 0 auto;
text-align: center;
}
I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.
As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.
One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.
This should work in all modern browsers (including mobile) as the browser support is good.
As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.
Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: absolute;
left: 50%;
height: 200px;
transform: translateX(-50%);
}
<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
Please use below code
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
CSS
#section3-container {
margin: 0 auto;
text-align: center;
width: 100%;
}
.approach-tablet {
height: 200px;
margin: 0 auto;
text-align: center;
width: auto;
}
Your image is outside of the div. If you put it inside, it centers
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
Just add another div, html is all about divs:
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
#section4-container {
text-align: center;
width: 100%;
}
<div id="section3-container">
</div>
<div id="section4-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
I have a problem centering everything while keeping my header in fixed position. Can anyone help me figure out why?
Here is my HTML
<div id="wrapper">
<div class="header">....</div>
<div class="experiences">...</div>
</div>
Here is the CSS:
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
height: auto;
}
.header {
background-color: #222;
color: white;
top: 0;
left: 0;
right: 0;
position: fixed;
height: 130px;
padding: 20px;
width: 1000px;
margin: 0 auto 0 auto;
}
.experiences {
background-color: #eee;
padding: 20px;
* padding-top: 190px;
width: 1000px;
margin-top: 170px;
}
You just need to remove the left and right declarations in .header.
The rest should already be centered (unless you use a very old version of IE...).
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?