时间戳

首页 > 解决方案 > 不同框中的中心图标

html - 不同框中的中心图标

问题描述

我试着把图标放在每个盒子的中间......我觉得这有点棘手，因为其中一些盒子比其他盒子大。

margin: auto 不是正确的解决方案。正确的？

你有什么想法让它在中间吗？

那是我的盒子代码：

.career-headline {
  padding-bottom: 30px;
  font-size: 24px;
  color: #303f9f;
  text-align: center;
}

.text-container-career {
  vertical-align: top;
  display: inline-block;
  text-align: left;
}

@media (min-width: 1200px){
.text-container-career {
    width: 100%;
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (min-width: 992px) {
.text-container-binary {
    width: 100%;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media (min-width: 768px) {
.text-container-binary {
    width: 100%;
    margin-left: 15px;
    margin-right: 15px;
  }
}

.career-container {
  width: 100%;
  height: 1300px;
  background-color: #303f9f;
}

.career-container-headline h2 {
  padding: 2% 0 0 10%;
  font-weight: 500;
  font-size: 4rem;
  color: white;
  margin-bottom: 55px;
}


/* BOXES */



.wrapper {
  width: 70vw;
  height: 70vh;
  margin: 5vh auto 5vh auto;
  display: grid;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1rem;
  grid-template-areas:
  "box1 box2 box2 box3"
  "box1 box2 box2 box3"
  "box4 box4 box5 box6"
  "box7 box7 box5 box6";
}
/*
@media (max-width: 1200px) {
  .wrapper {
    width: 70vw;
    height: 70vh;
    margin: 5vh auto 5vh auto;
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 1rem;
    grid-template-areas:
    "box1 box2 box2 box3"
    "box1 box2 box2 box3"
    "box4 box4 box5 box6"
    "box7 box7 box5 box6";
  }
}

@media (max-width: 992px) {
  .wrapper {
    width: 70vw;
    height: 180vh;
    margin: 5vh auto 5vh auto;
    display: grid;
    grid-template-rows: 25% 25% 25% 25% 25% 25% 25%;
    grid-template-columns: 100%;
    grid-gap: 1rem;
    grid-template-areas:
    "box1"
    "box2"
    "box3"
    "box4"
    "box5"
    "box6"
    "box7";
  }
  .career-container {
    width: 100%;
    height: 2900px;
    background-color: #303f9f;
  }
}

@media (max-width: 768px) {
  .wrapper {
    width: 70vw;
    height: 180vh;
    margin: 5vh auto 5vh auto;
    display: grid;
    grid-template-rows: 25% 25% 25% 25% 25% 25% 25%;
    grid-template-columns: 100%;
    grid-gap: 1rem;
    grid-template-areas:
    "box1"
    "box2"
    "box3"
    "box4"
    "box5"
    "box6"
    "box7";
  }
  h2 {
    font-size: 2rem;
  }
  .career-container {
    width: 100%;
    height: 2900px;
    background-color: #303f9f;
  }
}*/

.wrapper .grid-box {
  background: rgba(232, 232, 232, 0.49);
  transition: all 250ms;
  font-size: 1.5rem;
  color: white;
  font-family: sans-serif;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  animation: fadein 1s ease-out normal backwards;
}

.wrapper .grid-box:hover {
  z-index: 2;
  position: relative;
  box-shadow: 0 1.5rem 2.8rem rgba(0, 0, 0, 0.15),
    0 1rem 1rem rgba(0, 0, 0, 0.15);
  transform: translate(0, -0.5rem) scale(1.01);
}


.wrapper .element1 {
  grid-area: box1;
  animation-delay: 0;
}
.wrapper .element2 {
  grid-area: box2;
  animation-delay: 100ms;
}
.wrapper .element3 {
  grid-area: box3;
  animation-delay: 200ms;
}
.wrapper .element4 {
  grid-area: box4;
  animation-delay: 200ms;
}
.wrapper .element5 {
  grid-area: box5;
  animation-delay: 100ms;
}
.wrapper .element6 {
  grid-area: box6;
  animation-delay: 200ms;
}
.wrapper .element7 {
  grid-area: box7;
  animation-delay: 300ms;
}
.wrapper .element8 {
  grid-area: box8;
  animation-delay: 200ms;
}


@keyframes fadein {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}



.grid-box {
        color: black;
        text-decoration: none;
        text-align: center;
        display: block;
        }

.grid-box, .career-icons {
transition: 0.3s;
}

.grid-box {
overflow: hidden;

}

.career-icons {
  /* display: block;
  margin-top: auto;
  margin-bottom: auto; */
  
  position: absolute;
}



.box_description {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;

  /* background: rgba(232, 232, 232, 0.49); */
  color: white;
  visibility: hidden;
  opacity: 0;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.box_text {
  text-align: center;
  margin: 2%;
  line-height: normal;
}



.grid-box:hover .box_description {
  visibility: visible;
  opacity: 1;
}

.grid-box:hover .career-icons {
  margin-top: -16em;
}
<div class="career-container">
      <div class="career-container-headline">

      </div>
      <div class="career-container-text">

        <main class="wrapper">

        <div class="element1 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">

          </div>
        </div>

        <div class="element2 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">

          </div>
        </div>

        <div class="element3 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">
 
          </div>
        </div>

        <div class="element4 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">

          </div>
        </div>

        <div class="element5 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">

          </div>
        </div>

        <div class="element6 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">


          </div>
        </div>

        <div class="element7 grid-box">
          <img class="career-icons" src="https://img.icons8.com/dusk/64/000000/city.png" alt="">
            <div class="box_description">

          </div>
        </div>

        </main>
      </div>
    </div>

在css中将图像响应式放在div中间的最佳方法是什么？

感谢您的帮助卢卡斯

标签： htmlcss

解决方案

尝试使用 flexbox ：

.grid-box {
  display: flex;
  justify-content: center;
}

推荐阅读