HTML CSS: Grid Container Align Icons in Vertical Middle

Question

How do I align these items in the middle of the boxes? I tried everything vertical align middle, justify content, flex center, text align

Trying to avoid using div from answer suggestion below, unless required, is there another way?

.material-icons
{
   align-items: center;
   justify-content: center;
   text-align:center;
   vertical-align: middle;
   border-color:black;
   border-width:1px;
   border-style:solid;

}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39" style="  display: grid;
                    grid-template-columns: repeat(1, 250px);
                    grid-template-rows: repeat(2, 250px);
                    grid-gap: 1px;
                    padding: 0px;
                    align-items: stretch;
                    position: relative; ">
<i class="material-icons" style="font-size:48px;">notifications</i>
  <i class="material-icons" style="font-size:48px;">delete</i>

khan · Accepted Answer · 2019-07-11T06:24:35.980

1

You can use this selector, .grid-container i, and use Flexbox to vertically and horizontally center the icon:

.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 250px);
    grid-template-rows: repeat(2, 250px);
    grid-gap: 1px;
    padding: 0px;
    align-items: stretch;
    position: relative; 
}


.grid-container i {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39">
    <i class="material-icons" style="font-size:48px;">notifications</i>
    <i class="material-icons" style="font-size:48px;">delete</i>
</div>

edited Jul 11 '19 at 06:24

answered Jul 11 '19 at 06:11

khan

1,466
8
19

is this the most efficient way of doing it? why didnt my css properties work above? there must be another way align-items: center; justify-content: center; text-align:center; vertical-align: middle; – jerrythomas38 Jul 11 '19 at 06:12
I updated my answer using @Soothran's solution. – khan Jul 11 '19 at 06:25

score 0 · Answer 2 · answered Jul 11 '19 at 06:34

In order to make it work using grid I would wrap the <i> in a <p> element and the <p> gets justify-self: center; align-self: center;

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 250px);
  grid-template-rows: repeat(2, 250px);
  grid-gap: 1px;
  padding: 0px;
  position: relative;
}
p {
  justify-self: center;
  align-self: center;
}

.material-icons {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39">
  <p><i class="material-icons" style="font-size:48px;">notifications</i></p>
  <p><i class="material-icons" style="font-size:48px;">delete</i></p>
  
</div>

interesting, khan wants to do this,.grid-container i { , not sure which answer is better or even matters, thanks though ! — jerrythomas38, Jul 11 '19 at 06:35

Soothran · Answer 3 · 2019-08-31T06:57:25.610

-2

Make the class .material-icons to a flex-container by adding display:flex property. You might have to increase the css priority of this style to override the default display style of .material-icons

.grid-container > .material-icons{
display:flex;
}

edited Aug 31 '19 at 06:57

answered Jul 11 '19 at 06:12

Soothran

1,233
4
14

this is not working, did you try it on codepen? display:flex; – jerrythomas38 Jul 11 '19 at 06:13
because material css is overriding your custom styles. So either you can put !important property (display: flex !important) or load your custom css file after loading material css – Soothran Jul 11 '19 at 06:18
can you provide working example in code pen, etc? thanks – jerrythomas38 Jul 11 '19 at 06:19
@Soothran is right, you can just put `display: flex`. – khan Jul 11 '19 at 06:20
https://codepen.io/anon/pen/ydwBLb?editors=1100#anon-login check this – Soothran Jul 11 '19 at 06:21
Its working at my end. Still don't understand why this became a useless answer. @Khan's modified answer does not requires !important. Its a nice approach – Soothran Jul 11 '19 at 06:31

HTML CSS: Grid Container Align Icons in Vertical Middle

3 Answers3