div内のコンテンツのセンタリング

Question

私はビジュアルデザイナーで、CSSを初めて使用しています。私はロードブロックを打って、あなたが私がそれを整理するのを助けることを望んでいる！

ulにいくつかのテキストと画像がありますが、ブラウザのサイズがどのように変更されてもdivに中央揃えが必要です。私は適応性のあるWordPressのテーマにこのコードを追加しています。

.clinCon { 
 
    height: 460px; 
 
    background: rgb(249, 255, 254); /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1); /* IE6-9 fallback on horizontal gradient  */ 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
.clinCon > ul { 
 
    list-style-type: none; 
 
    padding: 33px 0px 0px 0px; 
 
    position: relative; 
 
    font-size: 22px; 
 
    letter-spacing: 0.05em; 
 
    color: #566471; 
 
} 
 
.clinCon img { 
 
    padding: 11px 20px 0 0; 
 
    color: #566471!important; 
 
    width: 70px; 
 
} 
 
.clinCon p { 
 
    font-size: 13px; 
 
    position: relative; 
 
    top: -23px; 
 
    left: 70px; 
 
}

<section class="shadow"> 
 
    <div class="clinical">CLINICAL</div> 
 
    <div class="clinCon"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">1-on-1 Therapy</li> 
 
     <p class="explain">Address root causes of addiction</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Addiction Education</li> 
 
     <p class="explain">Understand Addiction's inner workings</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Literary Therapy</li> 
 
     <p class="explain">Identify, process and resolve trauma</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Process Group</li> 
 
     <p class="explain">Connect with a group of your peers</p> 
 
    </ul> 
 
    </div> 
 
</section>

任意の助けいただければ幸いです。本当にありがとう！！あなたの要件を満たすためにあなたのHTMLとCSSを変更

Answer 1

....

.clinCon{ 
 
height:auto; 
 
background: rgb(249,255,254); /* Old browsers */ 
 
background: -moz-linear-gradient(-45deg, rgba(249,255,254,1) 0%,  rgba(253,253,253,1) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(-45deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(135deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd',GradientType=1); /* IE6-9 fallback on horizontal gradient  */ 
 
border-bottom-left-radius:5px; 
 
border-bottom-right-radius:5px; 
 
} 
 

 
.clinCon > ul{ 
 
list-style-type: none; 
 
position: relative; 
 
font-size: 22px; 
 
letter-spacing: 0.05em; 
 
color: #566471; 
 
} 
 
.clinCon > ul > li { 
 
    height: 70px; 
 
    display: block; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
    padding: 20px 0px; 
 
} 
 
.clinCon img{ 
 
color: #566471!important; 
 
    width: 70px; 
 
    height: 70px; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 
.clinCon span{ 
 
display: inline-block; 
 
    line-height: 1; 
 
    padding: 10px 0; 
 
} 
 

 
.clinCon p{ 
 
font-size: 13px; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 !important; 
 
    margin-left: -35px; 
 
}

<section class="shadow"> 
 
<div class="clinical">CLINICAL</div> 
 
<div class="clinCon"> 
 
\t <ul> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>1-on-1 Therapy</span><p class="explain">Address root causes of addiction</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Addiction Education</span><p class="explain">Understand Addiction's inner workings</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Literary Therapy</span><p class="explain">Identify, process and resolve trauma</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Process Group</span><p class="explain">Connect with a group of your peers</p></li> 
 
\t </ul> 
 
</div> 
 
</section>

チェックこのアウトし、それはあなたの条件を満たしている場合、私に知らせて...

Answer 2

これを実現するには、

.clinCon { 
 
    height: 500px; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: rgb(249, 255, 254); 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient  */ 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
.clinCon > ul { 
 
    list-style-type: none; 
 
    padding: 33px 0px 0px 0px; 
 
    position: relative; 
 
    font-size: 22px; 
 
    letter-spacing: 0.05em; 
 
    color: #566471; 
 
} 
 
.clinCon img { 
 
    padding: 11px 20px 0 0; 
 
    color: #566471!important; 
 
    width: 70px; 
 
    float: left; 
 
    margin-left: 2em; 
 
} 
 
.clinCon p { 
 
    font-size: 13px; 
 
    float: right; 
 
    margin-right: 3em; 
 
    margin-top: 2em; 
 
}

<section class="shadow"> 
 
    <div class="clinical">CLINICAL</div> 
 
    <div class="clinCon"> 
 

 
    <ul> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"> 
 

 
     <p class="explain">Process Group 
 
      <br>Connect with a group of your peers</p> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</section>