RedXTech RedXTech - 6 months ago 8
CSS Question

<p> Off Center on Certain Computers but not Others

I have made a website for a friend, and I have some 'div's that contains 'p's. When viewing on my browser, they are perfectly centered in the div. (Chrome, 24in screen, Win10). When I view it in any other browser, the same is true.

When I visit the site on my Dad's computer (Chrome/Safari, 27in screen, OS X), the 'p's are aligned to the top of the 'div'.

I was wondering if there would be a way to fix this.

Site that I made.

Any suggestions would be great.

Answer

It's showing up as aligned to the top on my computer (OSX) as well so it may be something with the OS specific version of Chrome that's making it happen. The easiest thing to do would be to set your line-height to the same height as the parent element. In your situation it would be like this:

.content-head {
  height: 80px;
  width: 60%;
  text-align: center;
  background-color: #ff69b4;
}

p {
  line-height: 80px;
  color: #FDFDFC;
}
<div class="content-head">
  <p>Things and stuff</p>
</div>

That should fix it. If you're using sass you can define a variable for the height so nothing gets messed up if you want to change it.