html div将无法正确对齐

Question

我正在编写包含大量图片的网站，因此我使用angularjs来帮助我进行分类和布局。

在此之前一切都很顺利：

我的网格结构宽3列，高6列

（我收录此信息是因为我无法包含足以显示整个视图的图片）

事情是我只使用一个div和ng-repeat来放置这些div

.container-body .container-cityDisplay {
margin: 2% 0 0 2%;
}

.container-body .container-cityDisplay .cityDisplay {
display: inline-block;
width: 28%;
height: 200px;
padding: 1%;
margin: 1%;
background-color: #f4f4f4;
}

.container-body .container-cityDisplay .cityDisplay img {
width: 100%;
height: 100%;
opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
margin: -50% 0 0 0;
text-align: center;
font-size: 1em;
letter-spacing: 6px;
text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
color: transparent;
text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
display: block;
font-size: 1.3em;
letter-spacing: 14px;
margin: 10% 0 0 1%;
}

<div class="container-cityDisplay" ng-hide="hideCard2">
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
        <img ng-src="{{city.source}}">
        <h2>{{city.city}}<span>{{city.country}}</span></h2>
    </div>
</div>

如果有什么我没看到的话，请告诉我

Answer 1

嗯，有很多方法可以解决您的问题。但是，保留大部分代码我只会 更改h2文本的位置。 你很高兴。

我强烈建议您使用flexbox进行此类布局。

＆＃13;

＆＃13;

.container-body .container-cityDisplay {
margin: 2% 0 0 2%;
}

.container-body .container-cityDisplay .cityDisplay {
display: inline-block;
width: 28%;
height: 200px;
padding: 1%;
margin: 1%;
background-color: #f4f4f4;
  position: relative; /* Making the cityDisplay Relative */
}

.container-body .container-cityDisplay .cityDisplay img {
width: 100%;
height: 100%;
opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
/* margin: -50% 0 0 0; */
 position: absolute; /* Using Position to position the text absolute*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
text-align: center;
font-size: 1em;
letter-spacing: 6px;
text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
color: transparent;
text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
display: block;
font-size: 1.3em;
letter-spacing: 14px;
margin: 10% 0 0 1%;
}

＆＃13;

<div class="container-body">
  <div class="container-cityDisplay">
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country name is really long</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name <span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我让.container-body .container-cityDisplay成为了一个弹性箱。

＆＃13;

＆＃13;

.container-body .container-cityDisplay {
  margin: 2% 0 0 2%;
  display: flex;
}

.container-body .container-cityDisplay .cityDisplay {
  display: inline;
  width: 28%;
  height: 200px;
  padding: 1%;
  margin: 1%;
  background-color: #f4f4f4;
}

.container-body .container-cityDisplay .cityDisplay img {
  width: 100%;
  height: 100%;
  opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
  opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
  margin: -50% 0 0 0;
  text-align: center;
  font-size: 1em;
  letter-spacing: 6px;
  text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
  color: transparent;
  text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
  display: block;
  font-size: 1.3em;
  letter-spacing: 14px;
  margin: 10% 0 0 1%;
}

＆＃13;

<div class="container-body">
  <div class="container-cityDisplay" ng-hide="hideCard2">
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
      <img src="http://placehold.it/200">
      <h2>City<span>Country</span></h2>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;