CODEWITHSUNDEEP
htmlcss
Nirav
Nirav

Reputation: 11

Minimum Height Div Alignment

I got this code online and it satisfies my need of having a min-height div. But I also want the content to be vertically center aligned. Can someone please help? I have gone through many options given in these forums but they do not work in combination with this particuar css. And this particular css I must use to get a min-height div.

<html><style type="text/css">
  .prop {
    float:right;
    width:1px;

  }

  #footer {
    clear:both;
    border-top:2px solid #000000;
    text-align:left;
    font-size:80%;
  }

  .min200px {
    height:200px;
  }
  </style>
</html>
<body>

<div>
  <div class="prop min200px"></div>

I want this content to be vertically center aligned

  <div id="footer">
    Copyight 2012 - xyz
  </div>
</div>



</body>

Upvotes: 0

Views: 188

Answers (4)

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

I would use javascript/jQuery for this. This is just to point you out in the right direction

<div id="center">
  <div class="prop min200px"></div>
  I want this content to be vertically center aligned
  <div id="footer">
      Copyight 2012 - xyz
  </div>
</div>

<script type="text/javascript">
    var wh= window.height,
        h= $('#center').height(),
        x = (wh-h)/2;
    $('#center').css({"marginTop":"x"})
</script>

what this does: it checks your window heigh and your div height. it subtracts from each other. After that this value is divided by 2 (for equal space between top and bottom) The margin-top is changed by this so you would have the equal space. This doesnt make the div Center fixed position (if you scroll it still changes) so if you want to change that you need to make some CSS adjustments to make it fixed.

Upvotes: 0

Nirav
Nirav

Reputation: 11

I got it solved. Thank you all. But I needed a minimum height no matter what the content was and so I used above css code. But in addition to that I wanted my content to be centered. So I use the below code. The extra css is for my other needs:

@font-face { font-family: MyCustomFont;  src: url("file:///fonts/Roboto-Regular.ttf") }body,html,table { font-family: MyCustomFont; font-size:14.0pt;} body,html {text-align: center;vertical-align:middle;line-height: normal; margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;vertical-align: middle;text-align: center;}body {vertical-align: middle;text-align: center;}.minHeight { float:right; width:1px; height:94px; }

<div class="minHeight"></div><table height=94px align=center><tr>
<td align=center>My centered text </td></tr></table>

Upvotes: 0

Nishant Rana
Nishant Rana

Reputation: 21

<div>

I
want
this
content
to
be
vertically
center
aligned

Copyight 2012 - xyz

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41842

You are not wrapping the text in any element. It would be tough to do then.

Keep the text in a child element and give display:inline-block; vertical-align:middle; to it and also line-height to the parent element with a value equal to the element's height. And later as the line-height value inherits to child elements, give line-height to the child element as well to make it look nice.

Changed HTML:

<div>
    <div class="prop min200px">
        <div>I want this content to be vertically center aligned</div>
    </div>
    <div id="footer">Copyight 2012 - xyz</div>
</div>

Changed CSS:

.prop{
    line-height:200px;
}
.prop>div{
    line-height:20px; /* or  1em */
    display:inline-block;
    vertical-align:middle;
}

Working fiddle

FYI, you mentioned that you are using min-height property. but you haven't used it anywhere in the code. (you just declared a class name of that property name).

Upvotes: 1

Related Questions