Having trouble vertically aligning text? Combining AngularJS, Bootstrap, and Flexbox can help!

I have spent a lot of time trying to understand why I am unable to vertically align the text inside these cells. I have tried multiple solutions:

align-items: center;
vertical-align: middle;
justify-content: center;
justify-items: center;

Unfortunately, none of these methods seem to be working. I have attempted placing them in the containers and directly in the cells themselves without any success. It is puzzling because I have another table with a completely different structure that uses flex and it works perfectly. I'm feeling lost.

Here is the fiddle link where I am attempting to vertically align the cells containing text. Can anyone provide a solution that actually works? What am I missing?

https://jsfiddle.net/buwgq14a/15/

htmlcssangularjstwitter-bootstrapflexbox

Answer №1

Change the span to div

for instance 

<div class="epYearlyHeaderCell">
   <div class="epYearlyHeaderCellText">222</div>
</div>


.epYearlyHeaderCell{
   display:table;
}


.epYearlyHeaderCellText
{
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

Answer №2

To implement the flex property, simply include some css in your current style and you're good to go!

.epYearlyHeaderCell,
.epYearlyHeaderCell2,
.epYearlyHeaderMonthCell:first-child, .epYearlyHeaderMonthCell:nth-child(3), .epYearlyHeaderMonthCell:nth-child(5), .epYearlyHeaderMonthCell:nth-child(7), .epYearlyHeaderMonthCell:nth-child(8), .epYearlyHeaderMonthCell:nth-child(10), .epYearlyHeaderMonthCell:last-child, .epYearlyHeaderMonthCell:nth-child(2), .epYearlyHeaderMonthCell:nth-child(4){
display: flex;
align-items: center;
justify-content: center;
}

Check out a live example on JSFiddle here

Answer №3

Consider focusing on the specific span element 

.epYearlyHeaderCell span {
 position: relative;
 top: 50%;
 transform: translate(-50%, -50%);
}

Answer №4

It appears that there is a key piece missing from your code:

.epYearlyHeaderCell,
.epYearlyHeaderMonthCell {
    display: flex;
    align-items: center;
    justify-content: center;
}

Check out the updated JsFiddle link here

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

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with the :after property to see if it c ...

htmlcss

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

I recently started developing a to-do web application and was looking to enhance its appearance with some animations using UIKit. Currently, I have an animation that toggles when the todo-items are brought into view: <div class="todo-items uk-anim ...

javascripthtmlvue.jsanimationuikit

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

Initiating the ngOnInit lifecycle hook in child components within Angular

I am facing an issue with controlling the behavior of child components in my Angular application. The problem arises when switching between different labels, causing the ngOnInit lifecycle hook of the children components not to trigger. The main component ...

htmlangulartypescriptangular-material

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

phpjqueryhtmlmysqlajax

CSS: element misplaced at the top instead of the bottom where it belongs

The component with the ID of "#bottom-nav" actually appears at the top. I just designed this on CSS-board, so feel free to review the HTML and CSS code Take a look at it on CSS-desk here It is positioned at the very end of the page and includes a ' ...

htmlcss

Using the power of JavaScript to iterate through elements with the

Looking for a way to integrate JSON data into your simple bootstrap page? Here's a script that might help: Take a look at the following script: var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && ...

javascriptjsonajaxtwitter-bootstrap

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

javascriptjqueryhtmlcssslideshow

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

htmlangulartypescriptvalidation

To view the following set of three images, simply click on the "load more" button

I'm looking to add a load more button to reveal additional images. Currently, the page loads with 3 images visible, and upon clicking the load more button, the next set of 3 images should be displayed on the screen. Unfortunately, the code I've ...

javascriptjqueryhtmlcss

Encountering an "Invalid CSS" error while trying to import an external font in SASS

Encountering an issue while attempting to load an external font in my SASS file. Below is the code snippet used to import the font-face from the all.sass file located in the same directory as leaguespartan-bold-webfont.woff and leaguespartan-bold-webfont.w ...

csssassfonts

submit the data to the database

How can I successfully pass the value from the Ajax code to the database in this program aimed at displaying user details? There seems to be an error in the code for passing the value. What steps should I take to rectify this issue? function showUser() ...

javascriptphphtmlajax

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

htmlcss

The ng-model failed to display the updated value until a click was made somewhere on the page

I am struggling with displaying the correct value of an ngModel variable defined in my controller. Despite changing to the correct value in the console, it doesn't update on the page until I click somewhere else or hit the update button again. Here&a ...

javascriptangularjsamazon-web-servicesecmascript-6angular-ngmodel

Insert HTML code that is activated when the selection is modified

I have a simple dropdown menu in my HTML code. HTML <select name="breed" onchange="breedChanged()"> <?php while ($row = gdrcd_query($result, 'fetch')){ ?> <option value="<?php echo $row['id_breed']; ?& ...

javascripthtml

Svelte components loaded with no design aspects applied

I encountered an issue while trying to integrate the "Materialify" and "Carbon Components for Svelte" libraries into my Sapper project. The components seem to be loading, but without any associated styles. I followed the installation commands provided on t ...

cssuser-interfacesveltesapper

Increasing the font size on a document

Once again, faced with my own silly problems. This time I stumbled upon the following page: http://jsfiddle.net/g3VBT/ I am trying to style the "enter your U.R.L here" text with the following properties: font-weight: 600; font-size: 1.5em; The issue ...

htmlcssbuttontext

Guide to inserting text into an html element upon clicking an ASP:Button

In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...

c#javascriptjqueryasp.nethtml

I have noticed that the SVG viewBox appears different when using Vue.js

I cannot wrap my head around the fact that my svg viewBox acts differently in html compared to vuejs. Here is my code in vue: <template> <div class="venuecontainer" style="background-color:#808040;"> <svg class=&quo ...

htmlvue.js