How to create a DIV inside another DIV?

Question

I was trying to create DIVs inside div. But i am facing problem in centering the div. I followed http://stackoverflow.com/questions/114543/how-to-center-div-in-div

Using the approach suggested in above question, the DIV was centered horizontally but not vertically. http://jsbin.com/oyemu4

For the time being i am using margin-top: 20%. Please suggest some other way to center vertically. Another question, can we have opacity in percentage?

Answer 1

You'll find more info about vertical centring with css here.

About your opacity question, this is always noted in a percentage.

opacity: 0.90; /* This is 90% */

Answer 2

For opacity , supporting cross browsing

  filter: alpha(opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  -moz-opacity: 0.70;
  opacity:0.7;

For vertical alignment alternative

div{
 height:200px;
 line-height:200px;
/*dont need vertical alignment in this case*/
}

• Vertically Centering With Line-Height
• Understanding vertical-align, or "How (Not) To Vertically Center Content" (method 2)

Answer 3

Isn't opacity always specified in percentage? When you write something like opacity: 0.6, what you're saying is "make this 60% opaque".

Vertical centering in CSS is a pain, and can be a hassle to support in multiple browsers. If you really need it, sometimes you can "cheat" by setting margins/padding that will center it mathematically if you're willing to give the vertically-centered content a fixed height. This is the solution I would recommend. In your example, this means giving the inner div a fixed height and setting the margins such that it is vertically in the middle of the parent div.

Answer 4

use

<div style="width: 300px; height: 300px; background:Red; vertical-align: middle; display: table-cell;">
    <div style="width: 100px; height: 100px; background:Blue; margin: auto;"></div>
</div>

display:table-cell; vertical-align:middle; on outer div and margin:auto; on inner div