Question

我试图在底部和中心同时定位$db = mysqli_connect("localhost", "root", "", "photos"); $sql = "SELECT * FROM images ORDER BY RAND()"; $result = mysqli_query($db, $sql); while ($row = mysqli_fetch_array($result)) { echo'<div class="hero"> <div class="hero-content"> <div class="row"> <div class="social-img hide-750"> <div class="social-content"> <img src="img/'.$row["images"].'"> </div> </div> </div> </div> </div>'; }。我已经尝试了几个小时的CSS属性组合：margin，top / bottom，margin-top / bottom，absolute / relative / fixed等。

据我所知，因为外部容器是位置相对的：

    .hero {
  margin-top: -30px;
}
.hero .hero-content {
  margin: -10px auto 0;
  max-width: 1000px;
 /* padding: 50px 20px 170px;*/
}
.hero .hero-content h1 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content h2 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 200;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row {
 /* margin-top: 60px;*/
}
.hero .hero-content .row .social-img {
  background-color: #f5f5f5;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  float: left;
  margin: 0 20px 80px;
  width: 29%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.hero .hero-content .row .social-img .social-content {
  margin: 10px;
}
.hero .hero-content .row .social-img .social-content img {
  margin-bottom: 10px;
  height: auto;
  width: 100%;
}
.hero .hero-content .row .social-img .social-content p {
  color: #505e67;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
}
.hero .hero-content .row .social-img .share .fa {
  color: #bababa;
  font-size: 20px;
  padding-right: 10px;
}
.hero .hero-content .row .social-img .share .fa:hover {
  color: #f17e6f;
}
@media (max-width: 990px) {
  .hero .hero-content .row .social-img {
    width: 44%;
  }
  .hero .hero-content .row .social-img.hide-990 {
    display: none;
  }
}
@media (max-width: 750px) {
  .hero .hero-content {
    padding: 70px 100px 220px;
  }
  .hero .hero-content .row .social-img {
    margin: 0 0 70px;
    width: 100%;
  }
  .hero .hero-content .row .social-img.hide-750 {
    display: none;
  }
  .hero .hero-content .row .social-img .social-content img {
    max-height: inherit;
  }
}
@media (max-width: 575px) {
  .hero .hero-content {
    padding: 70px 20px 200px;
  }
  .hero .hero-content h1 {
    font-size: 20px;
  }
}

然后是我的overflow: 'hidden'：

<div>

如果我放header { position: relative; min-height: auto; text-align: center; color: #fff; width: 100%; background-color: #c9c9c9; background-image: url('shiny-wallpaper-black.jpg'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }，那么我会在底部获得<div>但不会居中。如果我更改<div style="position: absolute; bottom: 8%; left: 0%; !important"> <div align = Center style=""> Partner with: </div> <a href="http://www.harveymilton.com"> <img src="assets/harveymilton.png" style="width:50%;height:50%"> </a> </div>，则position: absolute会居中但不会位于底部。我怎样才能得到两者？

Answer 1

要实现这一点，一个选项是使用带有display: flex规则的包装元素，如下所示：

.wrapper {
    /* bar at the bottom */
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;

    /* child items will be horizontally centered */
    display: flex;
    justify-content: center;
}

<div class="wrapper">
    <div>Hello!</div>
</div>

Answer 2

简单的方法是在绝对div中设置一个带有magin：div的div

body>div {
position:absolute;
bottom:0;
left:0;
width:100%;
}

div div {
display:table;/* or widthh:xx;*/
margin:auto;
border:solid;

<div>
<div>margin:auto + display or width</div>
</div>

同时在页面的底部和中心放置一个div

2 个答案: