2 replies [Last post]
rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 2 days 13 hours ago
Timezone: GMT+12
Joined: 2015-10-24
Posts: 10
Points: 30

Hi there:

I'm centering a block of text inside a div, it is working but I note that the result is not exactly centered, instead it is offset vertically by 2px aprox.

the code is this:

<body>
<div class="outer">
  <div class="inner"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>
</body>

.outer {
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  background:#3C6;
}
 
.inner {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  background:#FF0; 
}

If I reset margin and padding to 0 for all elements, the offset ramains.

What could I be missing here?

Thanks in advance,

Rafael

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Rafael, I don't see in the

Hi Rafael,
I don't see in the code why it would be out.
Personally I would probably ignore it.
If you need to fix it you could try margin-top:-1px for the .inner p.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It may be the space below the

It may be the space below the baseline that is reserved for descenders, e.g. qypgj.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.