How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data.

Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly.

This is how it currently appears:

https://i.sstatic.net/wZunW.png

Below is the snippet of HTML code:

<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;"> 
    <span style="border: 1px solid white;">Batch state </span>
    <img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()" 
        matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
        {{inst.batchState}} 
</mat-cell>
</ng-container>

I desire for my span to be positioned centrally at the left-hand side of the cell. I've attempted using text-align:center; left:0px; and 

padding-top: 25%; padding-bottom: 25%
(inside the span element), but these CSS styles did not take effect. Is there any other method to achieve this?

htmlcssangularangular5

Answer №1

After some investigation, I discovered that the best solution was to apply some custom CSS to the mat-header-cell. By adding 

display: flex; align-items: center;
, I was able to achieve the desired layout.

<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;display: flex; align-items: center;"> 
    <span style="border: 1px solid white;">Batch state </span>
    <img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()" 
        matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
        {{inst.batchState}} 
</mat-cell>
</ng-container>

https://i.sstatic.net/pkiwd.png

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

Transforming a CSS Clip Path into an SVG Clip Path without the need for an image

I have a basic HTML structure: .btn_clip { display: block; width: 524px; height: 170px; background: #ed1c23; font-size: 25px; color: #fff; text-align: center; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); line-heig ...

csssvgclip-path

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

Ensure that the <td> element remains within the confines of the window

When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted. Next, I ex ...

htmlcsstwitter-bootstraphtml-table

What is the best way to create three buttons for selecting various parameters?

I have a code snippet where I want to assign different parameters to each button when clicked. However, despite my logic, the functionality is not working as expected. Can someone help me with the correct syntax? For example, if I click the "Start (Easy) ...

javascripthtmlbutton

Angular module not found: Solving the "Cannot find module" issue

Currently, I am in the process of developing an angular 7 application and I have limited knowledge about it. Could someone please assist me in understanding why it is unable to locate the component.ts files? These files do exist in the paths mentioned by t ...

angular

Sending variables from a main page to a nested component

Currently facing an issue with the routing mechanism in Angular 9. Specifically, I am struggling to capture the parameter inside the BuildingDetailComponent even though it is present in the URL displayed in the address bar. In the Parent component, my rou ...

angulartypescriptangular-activatedroute

Is it possible to utilize :not in this scenario?

<ul class="promocode"> <li>one</li> <li>two</li> <li class="three">three</li> </ul> Is there a way to use :not in order to apply a hover effect to the entire list, except when hovering ov ...

css

Refresh the information in the <ion-datetime> component by utilizing the formGroup

I am currently working with a form that has been created using 'FormBuilder'. The form includes a date control and I am trying to figure out how to update the data in that control using the patchValue() method. In the template, the control has d ...

angulartypescriptionic-frameworkionic2

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

Implementing a vertical divider line in between columns with Foundation CSS

Here is the HTML code snippet: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/> <div class="card"> <div class="card-section"> <section class="row"&g ...

htmlcsszurb-foundation

Can you use setValidators() in Angular to validate two patterns simultaneously?

Is there a way to validate both IP address and IP address range in a single control using Angular? I have tried using the following code snippet: controls["CapPoolVolExpolAldClientControl"].setValidators([Validators.required, Validators.pattern(/([0-9]){1 ...

angulartypescriptvalidation

What can I do to enhance the responsiveness of this rotating cube?

Here I am working with a rotating cube on the web. Check out my similar code. I am attempting to make it so that when the browser size is reduced, the table and cube also shrink in size accordingly without changing their position relative to each other. I ...

csstwitter-bootstrap

Tips for adding an icon to an image using PHP and CSS

My goal is to create a responsive image gallery where each image has an icon or text that allows me to delete it if necessary. Here is my HTML and PHP code: <?php $sqlimage = "SELECT * FROM images where `id_user` = '".$customer_id."'"; ...

phphtmlcsstwitter-bootstrapbootstrap-5

This code appears to be invalid based on W3C standards - unsure on the solution to correct the errors

My website is quite large, but unfortunately it contains 31 errors. I am unsure of how to go about fixing them. I would greatly appreciate any assistance in resolving these errors, especially the ones that seem to appear for unknown reasons: http://valid ...

htmlcssw3c

Utilizing Azure Active Directory for Authentication in Angular 13 and .NET Core Web API

I've set up a .NET CORE 6 Api as the backend and an Angular 13 frontend. I'm currently facing authentication issues with Angular using msal to call the protected .NET Core API, specifically the weatherforcast template. While I can successfully au ...

angular.net-coreasp.net-core-webapiazure-ad-msalmsal-angular

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

phpcssbackgroundinvisible

Saving Style Sheets in a Database

Currently, I am interested in saving CSS data in a mySql database as part of my LAMP setup. My intention is to create an input field that includes the following code: body{ background: url("http://google.com/image.jpg") no-repeat; color: orange; } #someDi ...

phpmysqlcsssecurity

How can I create square corners within other square corners?

https://i.sstatic.net/OsDsg.png Hey there everyone, I'm curious if it's achievable to create borders like these using only CSS, without relying on a set image. If anyone has insight on how this can be accomplished, please share your knowledge. ...

css

Expansive Child Division with Ample Margins

I'm currently working with a nested set of divs and I need the inner div to occupy the full width without extending beyond the parent div's margins. Despite trying to use max-width:100%, it hasn't been successful so far. For this particular ...

htmlcss

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

javascriptjqueryhtmlcss