編集項目のサイズのCSSやHTML

Question

こんにちは、ここで、現在のウェブサイト enter image description here

だと私はそれは私がまだ項目が水平になりたいこの

enter image description here

のように見えるように画像のサイズを小さくしようとしています垂直にセンタリングされます。私は.sampleの幅を減らそうとしました。画像は小さくなりますが、現在は水平方向と垂直方向の中央に配置されていません。完全に取り除くために

.portfolio { 
    width: 80%; 
    margin-right: auto; 
    margin-left: auto; 
} 

：あなたは

.portfolio { 
 
    position: relative; 
 
    min-width: 300px; 
 
    width: 100%; 
 
    margin: 120px auto; 
 
    list-style: none; 
 
    margin-left: 70px; 
 
    margin-top: 280px; 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    padding-left: 5%; 
 
} 
 
.portfolio li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 20px 24px; 
 
    margin-left: -15px; 
 
    margin-bottom: -70px; 
 
    width: 30%; 
 
    padding-bottom: 10%; 
 
    min-height: 270px; 
 
    min-width: 270px; 
 
    margin-left: -1%; 
 
    margin-right: 1%; 
 
} 
 
.portfolio li .sample { 
 
    position: absolute; 
 
    display: block; 
 
    box-shadow: 0px 0px 8px #fafafa; 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 90%; 
 
    height: 56%; 
 
    min-height: 180.36px; 
 
} 
 
.portfolio li:hover .sample { 
 
    box-shadow: 0px 0px 12px #eee; 
 
} 
 
.details { 
 
    position: absolute; 
 
    bottom: 100px; 
 
    width: 90%; 
 
    display: block; 
 
    margin: 10px; 
 
    font-size: 17px; 
 
    text-align: center; 
 
    color: #8C8C8C; 
 
    letter-spacing: 1.4px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
}

<ul id="portfolio" class="portfolio"> 
 
    <li> 
 
    <a href="item/samplepage.html"> 
 
     <div class="sample" style="background-image: url('/images/clearear.png');"></div> 
 
     <div class="details">Clearear - website</div> 
 
    </a> 
 
    </li> 
 

 

 
    <li> 
 
    <a href="item/newsreader.html"> 
 
     <div class="sample" style="background-image: url('/images/newsreader.png');"></div> 
 
     <div class="details">Social newsreader - ux/ui</div> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a href="item/kbeauty.html"> 
 
     <div class="sample" style="background-image: url('/images/kbeauty.png');"></div> 
 
     <div class="details">K-beauty app - ux/ui</div> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 1

はただ、これらの3つの値を変更する前に...私は変更する必要がある値にどの感謝を指すことができれば素晴らしいだろうまたはこれらを減らすには、次の値を使用します。

.portfolio li { 
    position: relative; 
    float: left; 
    margin: 20px 30px; /* tweak this however you like */ 
    /* margin-left: -15px; remove this */ 
    margin-bottom: -70px; 
    width: 20%; /* tweak this however you like */ 
    padding-bottom: 10%; 
    min-height: 200px; /* lower this */ 
    min-width: 200px; /* lower this */ 
    /* margin-left: -1%; remove this */ 
    /* margin-right: 1%; remove this */ 
} 
.details { width: 100%; } 
.portfolio li .sample { width: 100%; } 

他のすべては%で設計されているので、残りの部分を縮小して中央に配置することができます。