Search code examples
htmlcssvertical-alignment

Vertical Align Text Inside Container with CSS

I'm pretty new to CSS and I'm trying to vertical-align: middle some text inside a div. This has been asked before, but I can't get any of the solutions to work for me, so I must be missing something obvious.

I've tried:

Having the text in a <p> tag and in CSS adding vertical-align: middle; to the <p> tag.

Having the text in a <p> tag and in CSS adding vertical-align: middle; to the parent div.

Having the text in a <div class="flex-container"> and in CSS adding

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}

As here: https://jsfiddle.net/dt3kvmdm/

The parent div doesn't have a fix height in px. Instead it's a percentage. One solution to a similar question suggested that this could be a problem, but I'm not clear on it. It would be helpful to me to be able to keep it as a percentage.

I'll be very happy to hear any suggestions!

Thanks a lot!

Nick.

Solution

  • You need to use display: flex on parent element or set height: 100% on child element Fiddle

    .ProjectTitle {
  background-color: green;
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-container {
  font-family: "Taviraj", serif;
  color: #000;
  letter-spacing: 0.11em;
}
    <div class="ProjectTitle">
  <div class="flex-container">
    Project Title
  </div>
</div>