如何在div中居中此图像

举起的柠檬

我已经尝试了很多解决方案，也许我只是为我的代码错误地实现了它们，但是我需要帮助，因为我的第 11 年任务将在 1 天后到期！有人救救我啊哈。我很抱歉没有使用小提琴示例，因为我不知道如何设置它或其他什么，而且该网站只是希望我添加更多细节，所以我会继续写作，直到它让我发帖，因为我我累了，无法思考。谁帮助我你的血腥传奇，来自straya的欢呼:)

.slideshow {
  display: none;
  padding: 10px 0 10px 0;
  margin-top: -50px;
  font-size: 25px;
  overflow-y: hidden;
}

.slide_selection {
  display: inline-block;
  padding: 20px 30px;
}

.slide_selection img {
  height: 40px;
  padding: 5px;
  border-radius: 250px;
  border: #00000099 2px solid;
  transition: all .3s ease-in-out, border .5s;
}

.slide_selection img:hover {
  background-color: #00000099;
}

.slide_icon {
  display: inline;
  float: left;
  padding: 0 30px 0 30px;
  transition: all .15s ease-in-out;
}

.slide_icon:hover {
  transform: scale(1.3);
}

figcaption {
  font-size: 10px;
  font-weight: bold;
}

.slide_content {
  background-color: #00000025;
  box-shadow: inset 0 15px 10px -15px black, inset 0 -13px 10px -15px black;
  margin: -10px 0 0 0;
  padding: 30px 0;
  display: inline-block;
}

.slide_content img {
  height: 95px;
}

.slide_image {
  width: 25%;
  height: 100%;
  float: left;
}

.slide_info {
  display: inline-block;
  float: right;
  width: 75%;
  text-align: left;
}

<div class="slideshow">
  <div class="slide_selection">
    <div onclick="test(1);" class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>WinRar</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>OllyDBG</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>NortonAV</figcaption>
    </div>
  </div>
  <div class="slide_content">
    <div class="slide_image">
      <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
    </div>
    <div class="slide_info">
      <h4>Software Type: </h4>
      <h4>Release Date: </h4>
      <p>Winrar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

  </div>
</div>

水星

我可以被视为血腥传奇吗？

代码笔：http ://codepen.io/anon/pen/NpoGPr

我所做的是使用 flexbox 将图像居中。

justify-content 用于水平居中

align-items 用于垂直居中

.slideshow {
  padding: 10px 0 10px 0;
  margin-top: -50px;
  font-size: 25px;
  overflow-y: hidden;
}

.slide_selection {
  display: inline-block;
  padding: 20px 30px;
}

.slide_selection img {
  height: 40px;
  padding: 5px;
  border-radius: 250px;
  border: #00000099 2px solid;
  transition: all .3s ease-in-out, border .5s;
}

.slide_selection img:hover {
  background-color: #00000099;
}

.slide_icon {
  display: inline;
  float: left;
  padding: 0 30px 0 30px;
  transition: all .15s ease-in-out;
}

.slide_icon:hover {
  transform: scale(1.3);
}

figcaption {
  font-size: 10px;
  font-weight: bold;
}

.slide_content {
  background-color: #00000025;
  box-shadow: inset 0 15px 10px -15px black, inset 0 -13px 10px -15px black;
  margin: -10px 0 0 0;
  padding: 30px 0;
  display: flex;
  height: 100%;
}

.slide_content img {
  height: 95px;
}

.slide_image {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide_info {
  display: inline-block;
  width: 75%;
  text-align: left;
}

<div class="slideshow">
  <div class="slide_selection">
    <div onclick="test(1);" class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>WinRar</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>OllyDBG</figcaption>
    </div>
    <div class="slide_icon"> <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
      <figcaption>NortonAV</figcaption>
    </div>
  </div>
  <div class="slide_content">
    <div class="slide_image">
      <img src="https://i.stack.imgur.com/iplpF.png" alt="" />
    </div>
    <div class="slide_info">
      <h4>Software Type: </h4>
      <h4>Release Date: </h4>
      <p>Winrar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。