Member Avatar for rajesh1158

I wanted to vertically align a div inside another div. For this I was using line-height (= height of the div) and vertical-align: middle. But if I specify the line-height value in % instead of px, it doesn't work. I tried googling it but could not find. What can be the problem?

  • 2 Contributors
  • 1 Reply
  • 205 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Try usign this approach...

Vertically aligns inner div and centers text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example document</title>
<style>
#outer {background-color:#AAAAAA;height:250px;width:250px;display:table}
#inner {background-color:#E0E0E0;display:table-cell;vertical-align:middle;text-align:center}
</style>
</head>
  <body>
    <div id="outer"><div id="inner">Hello!</div></div>
  </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.