Centering a div inside div, html

Question

I have 3 divs in a div and I want to center the bottom one. I've tried every hint I've found on the net (a you can see in my code...), but nothing works. This should be fairly easy, but it just won't center.

.container  {
position: relative; 
width: 968px;   
margin: 0 auto; 
text-align: center;
}

.text       { 
position: absolute;  
width: 968px; 
height: 100px;">
}     

.bg_image       {
position: absolute;   
width: 968px; 
height: 545px; 
top: 150px; 
background-image: url(x.jpg);
} 

.bg_image2      { 
position: absolute; 
display: block; 
width: 50%; 
margin: 0 auto;   
height: 200px; 
top: 545px; 
background-image: url(x.png); 
background-repeat: no-repeat;
}

This question is here about 3 times a day. Try using the search function. — Mardzis, Jan 14 '15 at 07:45
Again and again. [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Mardzis, Jan 14 '15 at 07:46
Welcome to SO! There is a typo in .text (a double quote sign). Also, please provide a prototype giving us a base to work on (jsfiddle.net or codepen.io). Please edit your question accordingly. — pixeline, Jan 14 '15 at 07:46
show your problem in fiddle. So that it is easy to identify the issue. — Suresh Ponnukalai, Jan 14 '15 at 07:55

score 0 · Answer 1 · answered Jan 14 '15 at 08:09

0

Firstly in your css code there's an error in .text remove this "> after height: 100px; Secondly we can't answer this if you don't add your html code.

answered Jan 14 '15 at 08:09

Shak Daniel

217
4
11

I know you can't comment yet, but this is not an answer. You may want to consider deleting it. – U r s u s Jan 14 '15 at 08:57

score 0 · Answer 2 · answered Jan 14 '15 at 09:47

I hope this example code may help you..

 <!DOCTYPE html> 
    <html > 
    <head> 
     <style type="text/css"> 
    #outer{ position:fixed; top:0; left:0; width:100%; height:100%; } 
    #inner1{ width: 50%; height: 20%; top: 25%; margin: 0 auto; position: relative; background:orange; } 
    #inner2{ width: 50%; height: 40%; top: 25%; margin: 0 auto; position: relative; background:red; } 
     </style> 
    </head> 
       <body> 
         <div id=outer> 
           <div id=inner1> </div> 
           <div id=inner2> </div> 
         </div> 
       </body> 
 </html>

score 0 · Answer 3 · answered Jan 14 '15 at 11:44

Give a fixed width eg(width:100px;) and margin:0 auto; whichever Div you want to make in center.

This will work for you.

.centerDiv{
width:100px;   /*as per your choice but width should be fixed.*/
height:100px; /*as per your choice even you can add auto*/
margin:0 auto; /*this is important to make div in center.*/
}

Centering a div inside div, html

3 Answers3