Achieving vertical alignment of text within a container using CSS

My CSS skills are still quite new, and I'm currently attempting to vertically align some text within a div. While this question has been asked previously, I've struggled to make any of the proposed solutions work for my particular case, so it seems like there's something simple that I'm overlooking.

I've attempted:

Placing the text within a <p> tag and using CSS to apply vertical-align: middle; to the <p> tag.

Putting the text inside a <p> tag and adding vertical-align: middle; in the parent div's CSS.

Using a 

<div class="flex-container">
with CSS modifications such as:

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

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

The height of the parent div is not fixed in pixels; instead, it's set as a percentage. While a solution to a similar issue hinted at this being a potential problem, I'm still unclear about it. Ideally, I'd prefer to retain the percentage-based height.

I'd greatly appreciate any suggestions or advice!

Thank you very much!

Sincerely, Nick

htmlcssvertical-alignment

Answer №1

To achieve the desired layout, you can either apply display: flex to the parent element or specify height: 100% for the child element. Check out this Fiddle for a live example.

.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>

Answer №2

It seems like you're looking for some guidance on a specific code setup, so take a look at this:

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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Varied selection menu feature

Looking to build a new component: The idea is to create something similar to a dropdown list. I aim to incorporate this component into every cell (td) of table rows. The challenge lies in displaying the second div (item list) under the first div, but abov ...

csshtml

Discover the method for selecting an element within a table that includes a style attribute with padding using Jquery

Looking for a way to identify a td element with the padding style in a table I've attempted to locate a td element with the padding style attribute in a table $(Table).find('td[style="padding:"]') or $(Table).find('td[style] ...

javascripthtmljquerycss

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

I am currently implementing a Bootstrap dropdown menu along with jQuery to update the default <span class="selected">All</span> with the text of the selected item by the user. However, my objective is to display only the text of the selected it ...

javascriptjqueryhtmldrop-down-menu

Guide to displaying a local HTML file in CKEditor 4.3 using jQuery

Using CKEditor 4.3 on my HTML page, I aim to import content from a local HTML file and display it within the editor. (My apologies for any English errors as I am Brazilian :P) The jQuery code I have tried is as follows: $(document).ready(function(){ ...

javascriptjqueryhtmlckeditor

Where did my HTML5 Canvas Text disappear to?

I am encountering a common issue with my code and could use some guidance. Despite numerous attempts, I can't seem to figure out why it isn't functioning properly. To better illustrate the problem, here is a link to the troublesome code snippet o ...

javascripthtmlcanvas

Exploring Nested XML: Displaying nested XML data dynamically on an HTML webpage

Request: Clients are able to supply any XML file (along with an XSD file that includes the schema of the XML file) containing data. I am required to display a 'data preview' on the asp.net core website and save the Schema of the XML in a hierarch ...

c#htmlxmlasp.net-coremodel-view-controller

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

Utilizing HTML Elements for Conditional Statements

I had a question regarding HTML code and JavaScript functionality that I came across while honing my coding skills. My curiosity lies in understanding how an HTML element can act as a boolean condition within a JavaScript while loop. Take, for instance, ...

javascripthtmlwhile-loopbooleanconditional-statements

The text becomes jumbled and messy when the browser is resized

I came across this fantastic header design > https://codepen.io/rm/pen/ldhon <. However, I noticed that when the window is resized, the text ends up overlapping. In the demo provided, resizing the window too much causes the issue to become apparent, ...

htmlcss

What is the best way to showcase nested array information from a JSON file on an HTML webpage?

students.json { "students": [ { "studentname": "Rohit Kumar", "grade": "A", "student": [ { "SNo": "1", "Subject": "Maths", "Concept": "Numbers" }, { "SNo": "2", ...

javascripthtmljson

Resolving JSON/AJAX Problem Arising from Server Session Expiration

I've encountered a frustrating issue with my website where ajax and json calls are not working after the session timeout of 120 minutes on the server side. When a user attempts to make a call from a loaded page after the timeout, the call goes through ...

htmlajaxjsonstrutstiles

How can you check if a field is blank without allowing any empty spaces to be saved in JavaScript?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <form id="api_crud_form" name="api_crud_form" action="https://www.google.es"> Name: <input type="text" name="name" id=" ...

javascriptphphtml

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

htmlcsshtml-tableoverflow

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

javascripthtml

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

cssflexbox

Uploading an image directly from the canvas

Can anyone assist me? I'm new to using canvas in HTML and I have a question - is there a method of uploading an image from canvas to the server using multipart file upload during form submission? ...

ajaxhtmlspring-mvcbackbone.js

Adjust the borderBottomColor of Material-UI TextField upon completion of input

When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...

cssreactjsmaterial-uimaterial-design

Achieving perfect alignment: Centering text within a div with an aspect ratio

I have encountered a situation where I need to center text within a div that also has an aspect ratio. Since the aspect-ratio property is not supported by major browsers like Safari, I am looking for an alternative solution. Here is my current code: .a ...

htmlcssreactjs

Disabling a button until all textfield fields are completed: A Step-by-Step Guide

My modal contains a table with the following code structure. <div> <Table> <tbody> {props.data.map((p) => <> <tr> <th> STC </th> ...

htmlreactjshtml-tablereact-hooksfrontend