Question

如何在框的中间对齐这些项目？我尝试了一切垂直居中对齐，内容对齐，居中对齐，文本居中对齐

除非另有要求，否则尝试避免使用下面的答案建议中的div？

.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>

Answer 1

您可以使用此选择器.grid-container i，并使用Flexbox在图标上垂直和水平居中：

.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>

Answer 2

为了使其能够使用网格，我将<i>包裹在<p>元素中，而<p>得到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>

Answer 3

只需在类.material-icons中显示弹性

HTML CSS：网格容器在垂直中间对齐图标

3 个答案: