0

I'm writing my portfolio using pure HTML and CSS and I am struggling with the layout of my projects. The layout of my projects will be two projects per row, which I have in place currently. MY ISSUE: I want to place some text over the images and want to center the text horizontally and vertically within the left and right image boxes or "columns".

Edit: The different methods that I've tried centers my text for the whole page. Is there a way that I can vertically and horizontally align just within the left and right image boxes or "columns"? 

.column {
  float: left;
  width: 50%;
  padding: 5px;
  display: table-cell;
  vertical-align: middle;

}
.row::after {
  content: "";
  clear: both;
  display: table;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  float:left;
  margin-bottom: 15px;
}

.column .text{
  color: white;
  font-size: 20px;
  
}
<section id="sec1">
  <div class="row">
    <div class="portfoliotitle">
      <h1>Notable Projects</h1>
     </div>
     <div class="column">
       <a href="blah.html">
         <img src="assets/images/blah/blahnext.jpg">
       </a>
       <p class="text">This is text</p>
     </div>
     <div class="column">
       <a href="foo.html">
         <img src="assets/images/foo.jpg">
       </a>
     </div>
     <div class="column">
       <a href="moopoint.html">
         <img src="assets/images/moopoint.png">
       </a>
     </div>
     <div class="column">
       <a href="dash.html">
         <img src="assets/images/dash.png">
       </a>
     </div>
   </div>
</section>

This is an example of what I want to accomplish. example

JkAlombro
  • 1,696
  • 1
  • 16
  • 30
Jenny Hong
  • 15
  • 1
  • 4

2 Answers2

0

You can do something like this:

display: flex; //grid also works
justify-content: center;
align-items: center;

or the the other way:

text-align: center;
vertical-align: middle;
Vince Zuño
  • 71
  • 3
0

Please try this code

HTML

<section id="sec1">
  <div class="row">
    <div class="portfoliotitle">
      <h1>Notable Projects</h1>
     </div>
     <div class="column">
       <a href="blah.html">
         <img src="assets/images/blah/blahnext.jpg">
       </a>
       <p class="text">This is text</p>
     </div>
     <div class="column">
       <a href="foo.html">
         <img src="assets/images/foo.jpg">
       </a>
     </div>
     <div class="column">
       <a href="moopoint.html">
         <img src="assets/images/moopoint.png">
       </a>
     </div>
     <div class="column">
       <a href="dash.html">
         <img src="assets/images/dash.png">
       </a>
     </div>
   </div>
</section>

css

.column {
  float: left;
  width: 50%;
  padding: 5px;
  display: table-cell;
  vertical-align: middle;
  position:relative;

}
.row::after {
  content: "";
  clear: both;
  display: table;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  float:left;
  margin-bottom: 15px;
}

.column .text{
  color: white;
  font-size: 20px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  margin:0;

}
Ranjith v
  • 1,032
  • 5
  • 15