2 replies [Last post]
rafael.soteldo
rafael.soteldo's picture
Offline
newbie
Last seen: 3 years 34 weeks ago
Timezone: GMT-4.5
Joined: 2015-10-24
Posts: 8
Points: 27

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 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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: 14 hours 6 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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.