我有我的網站的主頁在頁面上平均中心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>
我試圖使用%得到它恰到好處,但它似乎永遠不會正確調整。
我很難過,可以使用一些幫助,有什麼我失蹤?
感謝
嗨垂直或水平居中? –
橫向上,我正在尋找 –
您可能想要查看'margin:auto' – SamuelMacleod