Question

我一直试图让以下代码工作数小时，但没有成功......你能不能帮助我让项目div居中（即使页面放大和缩小）？

这是我的HTML＆amp; CSS：

＆＃13;

#bottom {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #FFF;}
	
#secondsection {
	background-size: 100% auto;
	background-size: cover;
	color: #eaeaf0;
	margin-left: 7%;
	margin-right: 7%;
	padding-top: 35px;
	padding-bottom: 35px;
	position: relative;}

#ss_top {
	width: 100%;
	height: 100%;}

.ss_title {
	display: inline;
	float:left;
	color: #000000;
	font-family: 'Eurostile';
	font-size: 35px;
	text-transform: uppercase;}

.ss_title2 {
	color: #a5a5a5;}

#gallerybutton {
	position: relative;
	display: inline;
	float: right;
	margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	padding: 175px 0px 0px 0px;}

#pr_one, #pr_two {
	display: block;}

.pr_img {
	float: left;
	display: inline;
	margin-right: 1%;
	margin-bottom: 1%;}

#viewprofilebutton {
	position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

＆＃13;

<div id="secondsection">
					
	<div id="ss_top">
		<p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p>
			<button type="button" id="gallerybutton">See everything</button>
	</div>

	<div id="projects">
	<div id="pr_one">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
    	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
        <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	<div id="pr_two">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
     	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	</div>

	<a href="#thirdsection"><button type="button" id="viewprofilebutton">See my work</button></a>

</div>

＆＃13;

Answer 1

这是一个开始。看看下面的CSS：

#bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFF;}

#secondsection {
    background-size: 100% auto;
    background-size: cover;
    color: #eaeaf0;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
    border: 1px dotted red;
}

#ss_top {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    overflow: auto;
}
#ss_top p {
    margin: 0;
}

.ss_title {
    display: inline-block;
    color: #000000;
    font-family: 'Eurostile';
    font-size: 35px;
    text-transform: uppercase;}

.ss_title2 {
    color: #a5a5a5;}

#gallerybutton {
    position: relative;
    display: inline;
    float: right;
    margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
    border: 1px dashed blue;
}

#pr_one, #pr_two {
    display: block;
    border: 2px dashed blue;
    overflow: auto;
    text-align: center;
}

.pr_img {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    margin-bottom: 1%;
}
.pr_img img {
    display: inline-block;
    width: 100%;
    height: auto;
}

#viewprofilebutton {
    position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

我开始摆脱标题中的花车#ss_top，你不需要它。

对于带有图像的#projects面板，浮动让你遇到麻烦定心。

在#pr_one和#pr_two上，添加text-align: center，然后在display: inline-block上使用.pr_img，这将使您的图片居中对齐（给予/获取一些边距），然后应用合适的宽度30%，以便图像自动缩放以形成三行。

现在的诀窍是将display: inline-block应用于图像（.pr_img img），以便您现在可以使用边距来控制上/下/左/右间距。

请参阅演示：http://jsfiddle.net/audetwebdesign/rmtpy6t0/

注意：你还有一些要做的事，但至少这可以澄清与居中和浮动元素相关的问题。

响应式设计：如果您需要连续2或3张图片，具体取决于屏幕尺寸，则需要了解媒体查询。但是，因为您在div中包装了3张图片，所以每行锁定3张图片，但这可能没问题。

Answer 2

如果您想将图片居中，请在css中进行更改：

.pr_img {
  /* float: left; */
  display: block;
  /* margin-right: 1%; */
  /* margin-bottom: 1%; */
  margin: 0 auto;
}

Answer 3

而不是使用margin-left：auto和margin-right：auto add margin：auto

#projects {
    position: relative;
    margin:auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
  }

Answer 4

.pr_img {
  display: block;
  margin: 0 auto;
}

告诉我它是否有效

编辑：是的。

工作:) http://jsfiddle.net/max7j84m/

Answer 5

  .pr_img {
  text-align: center;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
}

这对我有用

如何以相对div为中心？

5 个答案: