1

I have a relative positioned div which I want to horizontal center. Also I want it to be at certain height in the middle of page. But with css below, I could put it in middle horizontally but it does not apply margin-top to it

  position:relative;
  margin: 0 auto;
  text-align:center;
  color:white;
  opacity:0.75;
  margin-top:30px;

What could be wrong??

GJain
  • 5,025
  • 6
  • 48
  • 82
  • 2
    Not sure what is wrong, but couldn't you just do `margin: 30px auto 0 auto;` ? – MitulP91 Aug 19 '13 at 21:16
  • 1
    http://jsfiddle.net/isherwood/s5PY5/2 Looks fine to me. Show your HTML or a demo. – isherwood Aug 19 '13 at 21:17
  • 1
    I willing to bet there is something else at play here. Can you give us more markup? What does the HTML look like? Are you using third party libraries? Have you used DOM inspection tools to see what is actually happening with CSS? – Michal Aug 19 '13 at 21:22
  • 1
    [Be](http://www.w3.org/TR/CSS2/box.html) [aware](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) [of](http://reference.sitepoint.com/css/collapsingmargins) [`margin collapse`](http://stackoverflow.com/questions/102640/css-margin-collapsing). – Hashem Qolami Aug 19 '13 at 21:25
  • @HashemQolami...the was margin collapse issue. The div upper was empty. Hence margin collapsing. When I put border transparent, it worked as exptected. Thank you all. I will close this soon – GJain Aug 19 '13 at 21:35

1 Answers1

0

Give this a whirl ;)

CSS:

.info {
width: 300px;
height: 40px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align:center;
color:white;
opacity:0.75;
background-color: #000; /*-- Specify to your liking on background color --*/
line-height: 40px;
vertical-align: middle;
}

HTML:

<div>
    <div class="inner">Post your text here</div>
</div>

Is that what you are seeking? Here is the jsfiddle: http://jsfiddle.net/s5PY5/7/

UPDATE:

UPDATED DEMO

This Guy
  • 1,666
  • 2
  • 14
  • 21