divの中心にする方法

Question

私は多くのソリューションを試しましたが、多分私のコードで間違って実装しましたが、私のyr 11タスクは1日で終了する予定ですので、助けが必要です！誰かが私をahaを救う。 私はそれを設定する方法や何かを知らないので、私は使用するようにするために詐欺の例を持っていないことをお詫びします。サイトはちょうど私が詳細を追加したいので、私は疲れて、思うことができません。私にあなたの血まみれの伝説ができます誰でも、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

私がやったことは、画像を中央にフレキシボックスを使用しています。

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