定位多个图像时遇到问题-CSS
[英]Trouble positioning multiple images - CSS
问题描述
I am trying to have the three images centered and at the bottom of the page. 
我正在尝试将三个图像居中放置在页面底部。 I'm stuck with the images to the left instead of the center. 我将图像固定在左侧而不是中央。 I've tried many different ways to get it to work, but none have worked. 我尝试了许多不同的方法使其正常工作，但没有一个有效。 If anyone could please help me it would be greatly appreciated 如果有人可以帮助我，将不胜感激
.banner { position: absolute; width: 100%; height: 25%; top: 0; left: 0; padding: 0; margin: 0; background-color: #595959; color: #fff; text-align: center; line-height: 180px; font-family: 'Lato', sans-serif; font-size: 25px; } body { padding: 0; margin: 0; } #imagesMain { position: fixed; bottom: 0; padding: 0; margin: 20px 10px; text-align: center; } img { margin-right: 25px; }
<!DOCTYPE html> <html lang="en"> <head> <title>A-level Revision Website</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head> <body> <div class="banner"> <h1>A-Level Revision Website</h1> </div> </div> <div id="imagesMain"> <a href="Maths.html"> <img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;"> </a> <a href="ComputerScience.html"> <img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;"> </a> <a href="Physics.html"> <img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;"> </a> </div> </html>
2 个解决方案
解决方案1
3 已采纳 2017-09-21 18:08:03
Just add width:100% on #imagesMain . 只需在#imagesMain上添加width:100% #imagesMain 。 Your images are centered but the #imagesMain itself isn't wide enough to show it. 您的图片居中，但#imagesMain本身的宽度不足以显示它。 width:100% makes it as wide as the viewport. width:100%使其与视口一样宽。
.banner{ position: absolute; width: 100%; height: 25%; top: 0; left: 0; padding: 0; margin: 0; background-color: #595959; color: #fff; text-align: center; line-height: 180px; font-family: 'Lato', sans-serif; font-size: 25px; } body{ padding: 0; margin: 0; } #imagesMain{ position: fixed; bottom: 0; padding: 0; margin: 20px 10px; text-align: center; width:100% } img{ margin-right: 25px; }
<!DOCTYPE html> <html lang="en"> <head> <title>A-level Revision Website</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head> <body> <div class="banner"> <h1>A-Level Revision Website</h1> </div> </div> <div id="imagesMain"> <a href="Maths.html"> <img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;"> </a> <a href="ComputerScience.html"> <img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;"> </a> <a href="Physics.html"> <img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;"> </a> </div> </html>
解决方案2
0 2017-09-21 18:14:22
Just modify your css of "#imagesMain": 只需修改您的“ #imagesMain”的CSS：
#imagesMain {
bottom: 0;
left: 0;
margin: 20px 10px;
padding: 0;
position: fixed;
right: 0;
text-align: center;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.