我为朋友制作一个简单的网站,而我似乎无法将5张图片放在中心位置? 我把它们放在div中,图像本身使用display:block;和保证金:自动;如果您在下面看到的话只能使用1张照片,那么它可以提前工作。 我的代码:
.middleContent{
width: 100%;
top: 50px;
position: relative;
}
h2{
font-family: helvetica;
font-size: 15px;
text-align: center;
float: left;
width: 20%;
position: relative;
top: 30px;
}
.middlePhoto1, .middlePhoto2, .middlePhoto3, .middlePhoto4, .middlePhoto5{
width: 15%;
padding-right: 2%;
padding-left: 2%;
}

<div class="mainContent">
<img class="topContent" src="img/homepage.jpg"></img>
<div class="middleContent">
<img class="middlePhoto1" src="img/icon1.png"></img>
<img class="middlePhoto2" src="img/icon2.png"></img>
<img class="middlePhoto3" src="img/icon3.png"></img>
<img class="middlePhoto4" src="img/icon4.png"></img>
<img class="middlePhoto5" src="img/icon5.png"></img>
</div>
</div>
&#13;
所以我对它进行了一些编辑,现在图像位于屏幕的中央,但如果有意义,它仍然不在中心屏幕的中心。我只使用了5%的填充权,而且我还有300px,但是当它确实有足够的像素空间时,第五个图标仍然不合适???!?!?!?!?!? !?!
答案 0 :(得分:2)
你可以试试这个:
.middleContent{
/* Use text align to center them; */
text-align: center;
}
.middleContent1,
.middleContent2,
.middleContent3,
.middleContent4,
.middleContent5{
/* Display them as inline-blocks; */
display: inline-block;
}
甚至更好,而不是给他们所有一个不同的类,使用CSS选择器来完成这项工作:
.middleContent > img {
/* Display them as inline-blocks; */
display: inline-block;
}
主要问题是您的float: left;
。 Float
使margin: auto
无效,因为float
的意图是允许其他项目环绕它。你可以试试这个,因为我在这里看不到它的必要性。
你问的是如何浮动两个彼此相邻的块,两者之间没有间隙,好吧,你可以使用font-size和inline-blocks来做到这一点。请尝试以下方法:
html {
/* Make sure you have a fontsize here as it will be useful for modern browser resetting (this is the `rem` value, or Root EM) */
font-size: 16px;
}
.middleContent {
/* Eliminate any gaps between inline-block elements by setting the font-size to 0 */
font-size: 0;
/* Set a percentage width to make your blocks scalable */
width: 50%;
/* Set a max-width to make sure your images stop scaling at some point */
max-width: 200px;
}
.middleContent * {
/* Make sure any tags inside your block WILL be able to contain text */
/* Start by defining it in pixels for older browsers */
font-size: 16px;
/* Then reset your font-size to the rem value. Older browser will fall back to 16px, but its not a huge issue. */
font-size: 1rem;
}
答案 1 :(得分:1)
您需要将margin: auto
添加到图像容器middleContent
,然后更改图像的宽度。最好只更改CSS中的样式,因此从图像中删除宽度并为它们添加新的CSS规则将为您提供更好的控制。我创建了jsFiddle,以便您可以看到我的建议。如上所述,您不需要所有不同的类,您可以使用像.middleContent img
这样的CSS选择器。
.middleContent {
width: 50%;
margin: auto;
}
.middleContent img {
width: 20%;
float: left;
display: block;
}
答案 2 :(得分:1)
你可以尝试使用align as middle找到下面的代码片段
.middleContent1,
.middleContent2,
.middleContent3,
.middleContent4,
.middleContent5,
{
align:middle;
}