0

I want the text to be right over the centre of each image, but instead it just stays above them. I'm using a div for each image and text item, and a general div to hold all of this items together. I'm sure there are more effective ways to organise this, however I'm very new to CSS and HTML.

What I'm trying to achieve.

The code I'm using:

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}

.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}


/* Caption text */

.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}
<div class="projects">
  <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project2">
    <div class="text2">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project3">
    <div class="text3">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
Erz
  • 13
  • 1

4 Answers4

0

You can use positioning for this. For example

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}


.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

/* Caption text */
.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: balck;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="projects">
  <div class="project">

    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading1</div>
  </div>
  <div class="project2">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading2</div>
  </div>
  <div class="project3">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading3</div>
  </div>
</div>

Fiddle code

Ahmad Habib
  • 2,053
  • 1
  • 13
  • 28
0

In .text you can use one of these methods:

.text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

or

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Here is an example with second solution

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}
.project {
    position: relative;
    margin:0 auto;
    width: 100%;
    max-height: 600px;
    min-height: 90px;
}
.text {
  font-family:'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="projects">
    <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
    <div class="project">
    <div class="text">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
    <div class="project">
    <div class="text">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
</div>
ciekals11
  • 2,032
  • 1
  • 10
  • 24
0

You can use absolute positioning for your title (instead of relative). Also as all your containers and titles use the same styles, you should just use the same class name for them instead of redefining the styles three times:

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}

.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

/* Caption text */

.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
  /* the following will vertically centre your heading */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div class="projects">
  <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project">
    <div class="text">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project">
    <div class="text">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
  • 1
    Used this one, worked perfectly! And the code is much cleaner with same class names. – Erz Mar 08 '21 at 14:55
0

just add this to your css

    .project,.project2,.project3{
      display:flex;
      justify-content:center;
      align-items:center
      margin:10px 0; 
    }


.projects {
  width: 54%;
  position: relative;
  margin: auto;
}


.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}
.project,.project2,.project3{
display:flex;
justify-content:center;
align-items:center;
margin:10px 0;
}
/* Caption text */
.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: balck;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="projects">
  <div class="project">

    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading1</div>
  </div>
  <div class="project2">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading2</div>
  </div>
  <div class="project3">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading3</div>
  </div>
</div>
AL.Sharie
  • 1,526
  • 1
  • 9
  • 14