1

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.

Runny Yolk
  • 1,074
  • 3
  • 23
  • 41
  • 2
    Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) – Paul Aug 23 '16 at 21:54

2 Answers2

4

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>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
1

I'm not sure if I completely understand what you're wanting, but see if this helps:

HTML:

<div class="ProjectTitle">
    <div class="flex-container">
        <p>Project Title</p>
    </div>
</div>

CSS:

.ProjectTitle {
    background-color: green;
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: 0;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Taviraj", serif;
    color: #000;
    letter-spacing: 0.11em;
    line-height: 20%;
    height: 100%;
}

.flex-container p {
    color: #ffffff;
    vertical-align: middle;
}

Fiddle: https://jsfiddle.net/dt3kvmdm/1/

Quiver
  • 1,351
  • 6
  • 33
  • 56