Question

我提前感谢所有的帮助，因为我是HTML和CSS的新手，我想把3张图片放在中心，但我不能把它们放在中心，我确定它的东西很傻但我无法弄明白。我添加了一个图像，以便您可以看到布局是什么。

body {
	font-family: Arial, Verdana, sans-serif;
	color: #000;
	font-weight: bold;
	margin: 0;
}

#wrapper {
	width: 100%;
}

#logo {
	float: left;

}

#navigation {
	clear: both;
	background-color: #14171a;
	width: 100%;
	height: 70px;
	box-shadow: 0px 5px 3px #000;


}

#navigation ul li {
	display: inline;
	margin-left: 50px;


}

#navigation ul li a {
	text-decoration: none;
	color: #fff;
	font-size: 20px;
}

#navigation ul {
	width: 570px;
	padding-top: 20px;
	margin: 0px auto 0px auto; 
}

#midcontent {
	
}

 h1 {
	margin: 0px auto 0px auto;
	margin-top: 50px;
	padding: 10px 0px 10px 10px;
	color: #fff;
	background-color: #6ac045;
	font-size: 170%;
	
	border-radius: 8px;
	width: 400px;
}

#midcontent article {

	}

 figure {
 	float: left;
	width: 300px;
	
	
}

figure img {

	display: inline-block;
	width: 300px;
	height: 244px;
}

figcaption {
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
	<title>Electronix CR</title>
	<link rel="stylesheet" type="text/css" href="CSS/Electronix.css">
</head>
	<body>
		<div id="wrapper">
			<header id="logo">
				<img src="images/Electronix.png">
			</header>
			<nav id="navigation">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
			<h1>What can we fix for you today</h1>
			<section id="midcontent">
				<article class="content">
					<figure><img src="images/Diagnostic.jpg" alt="Helianthus" />
					<figcaption>Siagnostic</figcaption>
				</figure>
				<figure><img src="images/LCD.jpg" alt="Passiflora" />
					<figcaption>LCD Replacement</figcaption>
				</figure>
				<figure><img src="images/Battery.jpg" alt="Nyctocalos" />
					<figcaption>Battery Replacement</figcaption>
				</figure>
				</article>
			</section>
			
		</div>
	</body>
</html>

Answer 1

您是否尝试使用BootStrap框架解决问题？使用网格，您可以根据所需的大小将图像放置在列和行中。 BootStrap在12的网格中工作。所以你需要的东西是

    <div class = row>
    <div class = col-md-4>
    <insert image here or content here>
    </div>
    </div>

您可能还需要将其添加到图片中：

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

基本上你会根据需要重复这个过程。每个图像的“col-md-4”为4 * 3 = 12。它可能需要额外的调整，但bootstrap几乎可以完成所有繁重的工作。下面是BootStrap及其文档的链接。祝你好运。

http://getbootstrap.com/

中心浮动图像

1 个答案: