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
  • 34,491
  • 66
  • 168
  • 213

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,279
  • 4
  • 32
  • 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,725
  • 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
  • 7,635
  • 2
  • 27
  • 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
  • 7,879
  • 12
  • 47
  • 69