如何居中一个相对定位的 div？

Question

如何居中一个相对定位的 div？

3

我已经尝试了几个小时让以下代码正常工作，但是一直没有成功... 您能帮我把项目div居中吗（即使页面缩放）？

这是我的HTML和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;}

#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;}

<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>

- Levano

您想要如何显示您的图像，是两行三列的宽度吗？如果是这样，您的页面大约将有3x488像素宽。请详细说明。 - Marc Audet

如果可能的话，我希望在小屏幕上有两行宽度，在大屏幕上有三行宽度。关键是无论我如何滚动，项目div都会粘在屏幕左侧... - Levano

5个回答

1

如果您想将图片居中，需要在CSS文件中进行更改：

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

- bea

1

不要使用margin-left:auto和margin-right:auto，改为使用margin:auto

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

- Akshay

0

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

告诉我它是否有效。

编辑：是的。

正常运作 :) http://jsfiddle.net/max7j84m/

- Imnotapotato

0

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

这对我有效

- Haseem habeeb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Audet · Accepted Answer

这是一个开始。请看下面的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 ，然后在.pr_img上使用 display:inline-block，这将使您的图像居中对齐（考虑一些边距），然后应用适当的宽度，例如30%，使图像自动缩放以形成一行三个。

现在的技巧是将图像 (.pr_img img) 应用 display:inline-block，从而可以使用边距来控制上/下/左/右间距。

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

注意：您仍需要进行一些修改，但至少这澄清了与居中和浮动元素相关的问题。

响应式设计：如果您想根据屏幕大小在一行中放置2或3张图片，您需要了解媒体查询。但是，因为您将3张图片包装在一个div中，所以您被限制为每行3张，但这可能没关系。