CODEWITHSUNDEEP
cssangularag-grid
James Morris
James Morris

Reputation: 373

aligning text inside ag-grid cell vertically

I am creating a grid that will be on a large screen and will need to have large row heights and text in order to be seen from a distance. The problem is the text in my cells are aligned to the top of the cell not centered. I have set my rowHeight to 100 and rowClass to 'large-row'. I found the lower 3 lines of css online but it did no help. The image below shows my issue.

.large-row {
 text-align: center !important;
 font-size:2.5em;
 font-weight: bolder;

 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}

enter image description here

Upvotes: 3

Views: 8702

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, set line-height in css for centering content vertically 

.ag-cell { line-height: 18px; }

Upvotes: 4

Robert
Robert

Reputation: 511

Angular 2+ has an API called "fxFlex" which provides an HTML attribute called "fxLayoutAlign" that makes aligning elements a breeze.

First off, remove the bottom 3 CSS properties as well as the text-align property, as the fxLayoutAlign attribute will provide it for you:

.large-row {
   font-size:2.5em;
   font-weight: bolder;
}

In your HTML you will use a variation of the following:

<div class="large-row" fxLayoutAlign="center center"> ..... </div>

This site allows you to play with the fxFlex API. I use it almost every day at my job. It's a wonderful resource

Upvotes: 1

Related Questions