1. 首頁
  2. 問答
  3. 在頁面上平均中心3張圖像

在頁面上平均中心3張圖像

2016-11-28 37 views
0

我有我的網站的主頁在頁面上平均中心3張圖像

而且我一直在試圖讓圖像在頁面上居中並居中，但一直失敗。

{ 
 
    padding: 50px; 
 
    font-family: sans-serif; 
 
    color: #666; 
 
    line-height: 18px; 
 
    font-size: 12px; 
 
} 
 

 
a 
 
{ 
 
    color: #06f; 
 
    text-decoration: none; 
 
} 
 

 
a:hover 
 
{ 
 
    text-decoration: underline; 
 
} 
 

 
.button 
 
{ 
 
    background-color: #eaeaea; 
 
    padding: 5px 9px; 
 
    display: inline-block; 
 
    color: #06f; 
 
    font-weight: normal; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
    border: none; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.button:hover 
 
{ 
 
    background-color: #06f; 
 
    color: #fff; 
 
} 
 

 
.headline 
 
{ 
 
    font-size: 12px; 
 
    color: #333; 
 
    margin-bottom: 10px; 
 
} 
 

 
.content 
 
{ 
 
    max-width: 650px; 
 
} 
 

 
.grid-wrapper 
 
{ 
 
    float: left; 
 
    margin-top: 30px; 
 
    padding-left: 125px; 
 
} 
 

 
.grid-item 
 
{ 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    padding-top: 25%; 
 
    max-width: 250px; 
 
} 
 

 
.grid-content 
 
{ 
 
    padding: 10px; 
 
} 
 

 
.grid-image-link 
 
{ 
 
    display: block; 
 
    height: 290px; 
 
} 
 

 
.grid-image 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    height: 290px; 
 
} 
 

 
#albumView{ 
 
    text-align: center; 
 
    background-color: #000000; 
 
} 
 

 
#indexMain{ 
 
    text-align: center; 
 
}
<body> 
 
    <div> 
 
     <ul class="grid-wrapper"> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="triangulation/triangulation.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290"/> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/triangulation">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="distort-grid/distort-grid.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" /> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/distort-grid">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="contrastdistort/contrastdistort.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290" /> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/contrast-distort">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </body>

我試圖使用％得到它恰到好處，但它似乎永遠不會正確調整。

我很難過，可以使用一些幫助，有什麼我失蹤？

感謝

來源

2016-11-28 John Hamlett IV

+2

嗨垂直或水平居中？ –

+0

橫向上，我正在尋找 –

+1

您可能想要查看'margin：auto' – SamuelMacleod

回答

1

您可以使用顯示器添加padding:0;：彎曲，並均勻地間隔開它證明內容：空間之間，並居中使用餘量：汽車

檢查這個片段

body { 
 
    padding: 50px; 
 
    font-family: sans-serif; 
 
    color: #666; 
 
    line-height: 18px; 
 
    font-size: 12px; 
 
} 
 
div { 
 
    width: 300px; 
 
    margin: auto; 
 
} 
 
ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    list-style-type: none; 
 
}
<body> 
 
    <div> 
 
    <ul class="grid-wrapper"> 
 
     <li class="grid-item"> 
 
     <div class="grid-content"> 
 
      <a class="grid-image-link" href="triangulation/triangulation.html"> 
 
      <img class="grid-image" src="http://placehold.it/290x290" /> 
 
      </a> 
 
      <p> 
 
      repository on <a href="https://github.com/snorpey/triangulation">github</a> 
 
      </p> 
 
     </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
     <div class="grid-content"> 
 
      <a class="grid-image-link" href="distort-grid/distort-grid.html"> 
 
      <img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" /> 
 
      </a> 
 
      <p> 
 
      repository on <a href="https://github.com/snorpey/distort-grid">github</a> 
 
      </p> 
 
     </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
     <div class="grid-content"> 
 
      <a class="grid-image-link" href="contrastdistort/contrastdistort.html"> 
 
      <img class="grid-image" src="http://placehold.it/290x290" /> 
 
      </a> 
 
      <p> 
 
      repository on <a href="https://github.com/snorpey/contrast-distort">github</a> 
 
      </p> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

希望它可以幫助

來源

2016-11-28 21:43:54 Geeky

-1

取下兩ul和lifloat:left和ul

body 
 
{ 
 
    padding: 50px; 
 
    font-family: sans-serif; 
 
    color: #666; 
 
    line-height: 18px; 
 
    font-size: 12px; 
 
} 
 

 
a 
 
{ 
 
    color: #06f; 
 
    text-decoration: none; 
 
} 
 

 
a:hover 
 
{ 
 
    text-decoration: underline; 
 
} 
 

 
.button 
 
{ 
 
    background-color: #eaeaea; 
 
    padding: 5px 9px; 
 
    display: inline-block; 
 
    color: #06f; 
 
    font-weight: normal; 
 
    border-radius: 2px; 
 
    cursor: pointer; 
 
    border: none; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.button:hover 
 
{ 
 
    background-color: #06f; 
 
    color: #fff; 
 
} 
 

 
.headline 
 
{ 
 
    font-size: 12px; 
 
    color: #333; 
 
    margin-bottom: 10px; 
 
} 
 

 
.content 
 
{ 
 
    max-width: 650px; 
 
} 
 

 
.grid-wrapper 
 
{/* 
 
    float: left;*/ 
 
    padding:0; 
 
    margin-top: 30px; 
 
    padding-left: 125px; 
 
} 
 

 
.grid-item 
 
{ 
 
    display: block;/* 
 
    float: left;*/ 
 
    width: 100%; 
 
    padding-top: 25%; 
 
    max-width: 250px; 
 
} 
 

 
.grid-content 
 
{ 
 
    padding: 10px; 
 
} 
 

 
.grid-image-link 
 
{ 
 
    display: block; 
 
    height: 290px; 
 
} 
 

 
.grid-image 
 
{ 
 
    display: block; 
 
    width: 100%; 
 
    height: 290px; 
 
} 
 

 
#albumView{ 
 
    text-align: center; 
 
    background-color: #000000; 
 
} 
 

 
#indexMain{ 
 
    text-align: center; 
 
}
<body> 
 
    <div> 
 
     <ul class="grid-wrapper"> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="triangulation/triangulation.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290"/> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/triangulation">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="distort-grid/distort-grid.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" /> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/distort-grid">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     <li class="grid-item"> 
 
      <div class="grid-content"> 
 
      <a class="grid-image-link" href="contrastdistort/contrastdistort.html"> 
 
       <img class="grid-image" src="http://placehold.it/290x290" /> 
 
      </a> 
 
      <p> 
 
       repository on <a href="https://github.com/snorpey/contrast-distort">github</a> 
 
      </p> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </body>

來源

2016-11-28 21:38:52 jafarbtech

+0

OP想要水平居中 – j08691

相關問題

 相關問題