Question

我试图在div的四个按钮下面插入文本。我正在尝试使用display：grid，以便它们彼此对齐。如果我不调整div的大小，它们就是Centered, with incorrect sizing。如果我调整它们的大小，它们将变成correct size, but not centered

这是我的SCSS和HTML：

HTML：

<div class="rowContainerHome">
  <div class="button highlight" id = "whoButton"><i class="fa fa-info"></i></div>
  <div class="button highlight" id = "educationButton"><i class="fa fa-graduation-cap"></i></div>
  <div class="button highlight" id = "experienceButton"><i class="fa fa-building-o"></i></div>
  <div class="button highlight" id = "contactButton"><i class="fa fa-comments"></i></div>

  <div class = "subText">Introduction</div>
  <div class = "subText">Education</div>
  <div class = "subText">Work</div>
  <div class = "subText">Contact</div>
</div>

SCSS：

.button
{

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    //base color of FA icon and border
    color: $text-color;
    border: 3px solid $text-color;

    /**This is where the bug is*/
    //width: 10vh;
    //height: 10vh;


    border-radius: 50%;
    margin: 20px 20px 20px 20px;
    transition: all 0.2s cubic-bezier(.25,.1,.25,1);
    cursor: pointer;    
}

.highlight
{
    background-color: $background-grey;

    &:hover
    {
        /* makes a drop shadow on the circle when highlighted by the mouse */
        /* also adjusts border color */
        box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        border-color: $fa-dark;
    }

    &:hover i 
    {
        /*changes FA icon color*/
        color: $fa-dark;
    }
}

.rowContainerHome
{
    height: 40vh;
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-content: center;

    background-color: $fa-dark;


    div
    {
        align-content: center;
        text-align: center;
        background-color: $blue
    }

    i
    {
        align-content: center;
    }
}

任何帮助将不胜感激！谢谢！

Answer 1

我认为图标及其标签应属于同一父对象。因此，当它们在x轴上移动时，它们会一起移动。

我还没有完全了解网格，所以我用flexbox解决了它。

<div class="block">
    <div class="button highlight" id="whoButton"><i class="fa fa-info"></i></div>
    <div class="subText">Introduction</div>
</div>

https://codepen.io/IanHazelton/full/773589a76a36cd365c2dc882c379d7bf/

调整大小<div>不会移动到网格布局的中心

1 个答案: