如何以div格式居中此圖像

Question

我已經嘗試了很多解決方案，也許我只是爲了我的代碼而錯誤地實現了它們，但我需要幫助，因爲我的第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>

Answer 1

我能考慮的血腥傳奇？

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

Answer 2

我沒有NT理解你的代碼，但我認爲你需要你divise它儘可能多的一個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