CODEWITHSUNDEEP
htmlcss
Venomous
Venomous

Reputation: 37

How to auto center images evenly?

I am trying to make the images center on the page and have evenly spaces. When I minimize the page for a mobile view, the images go to the left and there is a huge white space on the right side. Anyone know what's cause this and how to fix it?

.portfolio {
  color: #333333;
  background: #f7f7f7;
}

.portfolio h2 {
  padding-top: 50px;
  text-align: center;
  margin: 0 auto;
}

.portfolio p {
  text-align: center;
  margin-bottom: 0;
  line-height: 1.5em;
  padding-bottom: 30px;
}

hr {
  width: 10%;
  margin-bottom: 50px;
}

.card-module {
  display: inline-block;
  width: 33%;
  margin-bottom: 30px;
}

.card-content {
  position: relative;
  margin: 0 auto;
  max-width: 90%;
}

.card-content .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  height: 98%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.card-content:hover .content-overlay {
  opacity: 1;
}

.card-content,
.content-overlay,
.content-image,
.content-details {
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.card-content:hover .content-details {
  top: 57%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  font-size: 1.52vw;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
  font-size: 1.2vw;
}

.fadeIn-bottom {
  top: 80%;
}
<section class="work" id="work">
  <div class="portfolio">
    <h2>Work</h2>
    <p>
      brief description <br> here
    </p>

    <hr>

    <div class="card-module">
      <div class="card-content">
        <div class="content-overlay"></div>
        <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
        <div class="content-details fadeIn-bottom">
          <h3 class="content-title">Arsenal Fanpage</h3>
          <p class="content-text">As a highschool project, I made a soccer club fanpage website.</p>
        </div>
      </div>
    </div>

    <div class="card-module">
      <div class="card-content">
        <div class="content-overlay"></div>
        <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
        <div class="content-details fadeIn-bottom">
          <h3 class="content-title">Coding Website Beta</h3>
          <p class="content-text">This was a beta website created to display all my high school work.</p>
        </div>
      </div>
    </div>

    <div class="card-module">
      <div class="card-content">
        <div class="content-overlay"></div>
        <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
        <div class="content-details fadeIn-bottom">
          <h3 class="content-title">Coding Website Launch</h3>
          <p class="content-text">This was the official look of my portfolio website when released for all to see.</p>
        </div>
      </div>
    </div>

    <div class="card-module">
      <div class="card-content">
        <div class="content-overlay"></div>
        <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
        <div class="content-details fadeIn-bottom">
          <h3 class="content-title">Website Resume</h3>
          <p class="content-text">This is my website resume created from scratch.</p>
        </div>
      </div>
    </div>

    <div class="card-module">
      <div class="card-content">
        <a href="https://www.youtube.com/watch?v=i0eYyobCkGo" target="_blank">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Yotube Intro</h3>
            <p class="content-text">Created using Adobe After Effects and Adobe Premiere Pro</p>
          </div>
        </a>
      </div>
    </div>

    <div class="card-module">
      <div class="card-content">
        <a href="https://www.youtube.com/watch?v=UqDKgLVrO1c&feature=youtu.be" target="_blank">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">News Intro</h3>
            <p class="content-text">College project news intro</p>
          </div>
        </a>
      </div>
    </div>

  </div>
</section>

Upvotes: 0

Views: 72

Answers (2)

Tom
Tom

Reputation: 369

Since you are already centring your text you could center everything:

.portfolio {
    text-align: center;
}

That should do the trick.

Or you can wrap all card-modules into one div and apply that same style to that div.

Upvotes: 0

ewwink
ewwink

Reputation: 19154

wrap your .card-module in div then add css to the wrapper text-align:center

.portfolio {
color: #333333;
background: #f7f7f7;
}

.portfolio h2 {
padding-top: 50px;
text-align: center;
margin: 0 auto;
}

.portfolio p {
text-align: center;
margin-bottom: 0;
line-height: 1.5em;
padding-bottom: 30px;
}

hr {
width: 10%;
margin-bottom: 50px;
}

.card-module {
display: inline-block;
width: 33%;
margin-bottom: 30px;
}

.card-content {
position: relative;
margin: 0 auto;
max-width: 90%;
}

.card-content .content-overlay {
background: rgba(0,0,0,0.7);
position: absolute;
height: 98%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

.card-content:hover .content-overlay{
opacity: 1;
}

.card-content, .content-overlay, .content-image, .content-details {
width: 100%;
}

.content-details {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.card-content:hover .content-details{
top: 57%;
left: 50%;
opacity: 1;
}

.content-details h3{
color: #fff;
font-weight: 500;
font-size: 1.52vw;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}

.content-details p{
color: #fff;
font-size: 0.8em;
font-size: 1.2vw;
}

.fadeIn-bottom{
top: 80%;
}
#card-wrap{text-align:center}
<section class="work" id="work">
  <div class="portfolio">
    <h2>Work</h2>
    <p>
      brief description <br> here
    </p>

    <hr>
    <div id="card-wrap">
      <div class="card-module">
        <div class="card-content">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Arsenal Fanpage</h3>
            <p class="content-text">As a highschool project, I made a soccer club fanpage website.</p>
          </div>
        </div>
      </div>

      <div class="card-module">
        <div class="card-content">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Coding Website Beta</h3>
            <p class="content-text">This was a beta website created to display all my high school work.</p>
          </div>
        </div>
      </div>

      <div class="card-module">
        <div class="card-content">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Coding Website Launch</h3>
            <p class="content-text">This was the official look of my portfolio website when released for all to see.</p>
          </div>
        </div>
      </div>

      <div class="card-module">
        <div class="card-content">
          <div class="content-overlay"></div>
          <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
          <div class="content-details fadeIn-bottom">
            <h3 class="content-title">Website Resume</h3>
            <p class="content-text">This is my website resume created from scratch.</p>
          </div>
        </div>
      </div>

      <div class="card-module">
        <div class="card-content">
          <a href="https://www.youtube.com/watch?v=i0eYyobCkGo" target="_blank">
            <div class="content-overlay"></div>
            <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
            <div class="content-details fadeIn-bottom">
              <h3 class="content-title">Yotube Intro</h3>
              <p class="content-text">Created using Adobe After Effects and Adobe Premiere Pro</p>
            </div>
          </a>
        </div>
      </div>

      <div class="card-module">
        <div class="card-content">
          <a href="https://www.youtube.com/watch?v=UqDKgLVrO1c&feature=youtu.be" target="_blank">
            <div class="content-overlay"></div>
            <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
            <div class="content-details fadeIn-bottom">
              <h3 class="content-title">News Intro</h3>
              <p class="content-text">College project news intro</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 3

Related Questions