Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Codepen：http://codepen.io/anon/pen/NpoGPr

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

justify-content用于水平居中

align-items用于垂直居中

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我确实理解你的代码，但我认为你需要一个div容器，你可以根据需要对其进行分割然后将图像放在页面中间这里是一个简单的例子

<div class="container">
<div class="row">
    <div class="igreen col-sm-5 col-md-5 col-lg-5">this is will be green area</div>
    <div class="col-sm-2 col-md-2 col-lg-2"></div>
    <div class="col-sm-5 col-md-5 col-lg-5">step1</div>
    <div class="col-sm-5 col-md-5 col-lg-5">step1</div>
    <div class="col-sm-2 col-md-2 col-lg-2"> <img src="my_image.png"></div>
    <div class="ired col-sm-5 col-md-5 col-lg-5">this is will be a red area</div>
    <div class="col-sm-5 col-md-5 col-lg-5">step1</div>
    <div class="iblue col-sm-2 col-md-2 col-lg-2">this is the blue </div>
    <div class="col-sm-5 col-md-5 col-lg-5">step1</div>


</div>
this is a container

如何在div中居中这个图像

2 个答案: