How to center this image in div - html

Question

I've tried alot of solutions and maybe I just implemented them wrongly for my code but I need help as my yr 11 task is due in 1 more day! Someone save me aha.
I apologize for not having a fiddle example to use as I don't know how to set it up or whatever, also the site just wants me to add more details so I'm just gonna keep writing till it lets me post cause I'm tired af and can't think. Whoever helps me your a bloody legend, cheers from 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

Can I be consider as bloody legend?
Codepen: http://codepen.io/anon/pen/NpoGPr
What I did is use flexbox to center the image.
justify-content is for horizontal centering
align-items is for vertical centering
.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

i did nt understand your code but i think you need a div container you divise it as much as you need then you put your image in the middle of the page here is an simple example
<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