Question

我似乎无法将我的Div容器与我的图像集中在一起。我尝试了margin 0 auto;并添加宽度。

body{
	margin: 0px;
	}

.main{
	height: 950px;
	background:  url(../Images/Mountain.jpg) center center/cover no-repeat; 
	}

@media screen and (min-width: 1000px;){
	#container{
	height: 1000px;
    width: 1000px;	
    margin: 0 auto;
 	}
	}

.header{
	margin-top: 0px;
	width: 100%;
	}

.logo{
	float: left;
	margin-top: 10px;
	margin-left: 50px;
	}	

nav{
	float: right;
	margin-top: 26px;
	margin-right: 50px;
	}

.navBar{
	color: #fff;
	font-size: 20px;
	margin-left: 25px;
	text-decoration: none;
	}

.navBar:hover{
	text-decoration: underline;
	}

span{
	width: 100%;
	}

h1{
	font-size: 80px;
	color: #fff;
	text-align: center;
	clear: both;
	padding-top: 200px;
	}

h2{
	font-size: 36px;
	color: #fff;
	text-align: center;
	clear: both;
	margin-top: 50px;
	}

/*Header Section*/

#head{
	width: 100%;
	height: 400px;
	background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat; 
	}

.port{
	padding-top: 75px;
	}

.portfolio{
	width: 300px;
	height: 250px;
	}

.padding{
  	margin-left: 50px;
	}
.container_port{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

<!DOCTYPE html>
<html>
	<head>
		<title>-------</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">
		<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
		<link rel="stylesheet" href="CSS/Style.css">

	</head>
	<body>
		<div id="head">
		<div class="header">
			<img class="logo" src=http://placehold.it/100x100>

			<nav>
				<a class="navBar" href="#">Home</a>
				<a class="navBar" href="#">Portfolio</a>
				<a class="navBar" href="#">Blog</a>
				<a class="navBar" href="#">Testimonials</a>
			</nav>
		</div>
		<span>
			<h1 class="port">Portfolio</h1>
		</span>

	</div>	
	<div id="container_port">

			<div class="one">
				<img class="portfolio" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
			</div>
			<div class="two">
				<img class="portfolio" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
			</div>
			<div class="three">
				<img class="portfolio" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
			</div>
			<div class="four">
				<img class="portfolio" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
				<img class="portfolio padding" src="http://placehold.it/300x300">
			</div>

	</div>
	</body>
</html>

Answer 1

这应该让你接近：

#container_port {
  text-align: center;
}

编辑：我刚刚注意到您的CSS中有.container_port，但它显然是ID，而不是CLASS。

Answer 2

图像元素是内联块元素。您可以将其更改为块级元素，也可以使用margin：0 50％;

让我的DIV容器居中的问题

2 个答案: