2

I was trying to create DIVs inside div. But i am facing problem in centering the div. I followed How to horizontally center a <div> in another <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?

Community
  • 1
  • 1
Rakesh Juyal
  • 35,919
  • 68
  • 173
  • 214

4 Answers4

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*/
}
Pramendra Gupta
  • 14,667
  • 4
  • 33
  • 34
1

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.

Dan M
  • 1,765
  • 1
  • 11
  • 17
1

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

Vinay B R
  • 8,089
  • 2
  • 30
  • 45
0

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% */
tom
  • 8,189
  • 12
  • 51
  • 70