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

Building an Ionic app from a .git repository on your local machine: A step-by-step guide

Trying to set up Moodle's ionic mobile app on my local machine using Windows and following these steps: cd project-directory ionic platform add android Encountered an error in the command prompt: throw err; ^ Error: Cannot find module ' ...

androidangularjscordovabuildionic-framework

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

javahtmlangulartypescript

AngularJS Input field fails to update due to a setTimeout function within the controller

I am currently working on a project that involves AngularJS. I need to show a live clock in a read-only input field, which is two-way bound with data-ng-model. To create this running clock effect, I am using a JavaScript scheduler with setTimeout to trigge ...

javascriptjqueryhtmlangularjssettimeout

Jquery's remove function fails to function correctly when used on a cloned element

I am facing an issue where I have a list of rows that need to be deleted. However, when I attempted to use jQuery's remove function, it only removed the original row and not its clone. My goal is for the parent element of the parent to be removed when ...

javascriptphpjqueryhtml

Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

I am currently using a JavaScript file that was created for me to update form data based on user selections and display radio buttons along with the corresponding costs. Although the inline CSS in this script works perfectly fine in Chrome and Firefox, it ...

javascripthtmlcss

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

The absence of a closing parentheses in the argument is causing an issue when rendering

Apologies for the basic mistake, but I could really use some assistance with this syntax error. I've spent over an hour searching for it and still haven't been able to locate the issue. It seems to be around the success function(data) section. Th ...

javascriptjqueryhtmlajax

Processing a JSON array of objects in AngularJS

When using Angular's fromJson function to parse a JSON string, I encountered an issue. If the JSON is a simple array like "[1, 2]", the code works fine. However, I need to work with an array of dictionaries instead. var str = "[{'title' ...

javascriptjsonangularjsparsing

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

AngularJS ngResource failing to pass custom headers

Using ngResource to query a REST API, I am facing an issue with setting my API key in a custom header. Here is how I have attempted to do it: angular.module('ApiService', ['ngResource']) .factory('Api', ['$resource&ap ...

angularjsngresource

What is the most effective way to display data retrieved from a database by Laravel 4.2 using the 'ng-repeat' directive of AngularJS?

I've been working with Laravel 4.2 to fetch data from the database, it returns an array of JSON objects which I then pass to a view. However, I'm facing issues displaying this data using Angular JS' ng-repeat directive. Any ideas on how to a ...

angularjslaravel

Unable to reinitialize the DataTable using Angular Datatable

I've been working on an Angular application that has a simple CRUD functionality. Initially, I tested my data with a static HTML table and everything was functioning as expected. However, I decided to implement a data table framework called Angular da ...

jqueryhtmlangulartypescriptdatatable

Issues with ng-show and ng-hide not functioning as expected

Is there a way to hide a section when a certain variable is null? <ion-item class="item-avatar calm" id="detalleDeCita-list-item29" ui-sref="volare2.perfilDelAsesor" ng-show="asesor" > <h2calm>Asesor {{asesor}} <p>Ver perfil< ...

angularjsionic-frameworkng-showng-hide

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

jquerycss

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

Angular service providing a subset of resource data

I am currently working with an Angular factory called DogePrice: .factory('DogePrice', ['$resource', function ($resource) { return $resource("https://chain.so/api/v2/get_info/DOGE"); }]) Usually, the API response looks like this: ...

javascriptangularjsangular-promiseangular-resourceangular-providers

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

htmlcss

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

What is the best way to execute a function every 10 seconds?

Is there a way to continuously call a function every 10 seconds? Currently, using $timeout and setTimeout only triggers the function dataTime once. I need it to repeat indefinitely. angular .module('sfcLeftSiteBar') .component('leftSiteBar ...

angularjs

Building a dynamic web application using AngularJS and Spring MVC for seamless data redirection

I am still learning AngularJS and this question might sound a bit peculiar. My current challenge involves redirecting to a new page with data-binding from a Spring Controller. The scenario is that upon clicking a button or hyperlink on one page (let&apos ...

angularjsspringspring-mvc