html divs will not align properly

Question

I am coding this website that includes a lot of pictures so I am using angularjs to help me categorize and lay things out.

Everything was going good until this :

I have this grid structure that is 3 columns wide and about 6 columns high

(I included this information because I could not include a picture large enough to show the entire view)

The thing is I am only using one div and ng-repeat to lay these divs out

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

Please let me know if there is something I am just not seeing

Possible duplicate of [CSS Div Alignment Problem](https://stackoverflow.com/questions/5149087/css-div-alignment-problem) — Nayantara Jeyaraj, Aug 01 '17 at 06:31

score 2 · Accepted Answer · answered Aug 01 '17 at 05:06

Well, there are many ways to fix your issue. However keeping most of you code I will only change the position of the h2 text. You are good to go.

I highly recommend using flexbox for this kind of layouts.

.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%;
}

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

score 0 · Answer 2 · answered Aug 01 '17 at 05:11

I made .container-body .container-cityDisplay a flexbox.

.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%;
}

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

html divs will not align properly

2 Answers2