CODEWITHSUNDEEP
csshtml
Rakesh Juyal
Rakesh Juyal

Reputation: 36779

How to create a DIV inside another DIV?

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?

Upvotes: 2

Views: 2560

Answers (4)

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

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*/
}

Upvotes: 2

Vinay B R
Vinay B R

Reputation: 8421

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

Upvotes: 1

Dan M
Dan M

Reputation: 1785

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.

Upvotes: 1

tom
tom

Reputation: 8359

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% */

Upvotes: 0

Related Questions