CODEWITHSUNDEEP
htmlcssalignment
user2989185
user2989185

Reputation:

text top center aligment on picture

So I want what text be on image and horizontally centered. And then the windows is resized it still be there.It have look like that. Now it is in the bottom of image. 

.main_image {
  display: block;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}
.image_text {
  font-family: "Open Sans";
  text-align: left;
  border: 1px solid;
  position: relative;
  bottom: 50%;
  transform: translateY(-50%);
}
.main_text {
  font-size: 38.889px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}
.main_subtext {
  font-size: 22.222px;
  color: rgba(0, 0, 0, 0.988);
}
<figure class="images_class">
  <img src="http://i.imgur.com/sOCyriP.png" alt="" class="main_image" />
  <figcaption class="image_text">
    <div class="main_text">Main text</div>
    <div class="main_subtext">Subtext</div>
  </figcaption>
</figure>

Upvotes: 0

Views: 37

Answers (2)

Gibbs
Gibbs

Reputation: 22974

Fiddle

  position: absolute
  width:100%
  margin: auto

To your image text.

If you want to add something in the center which takes 100% width, You have to use width:100% and margin:auto .

Upvotes: 0

emmanuel
emmanuel

Reputation: 9615

You should position text absolute in a relative container.

.images_class {
  position: relative;
}
.main_image {
  display: block;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}
.image_text {
  font-family: "Open Sans";
  text-align: center;
  border: 1px solid;
  width: 90%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}
.main_text {
  font-size: 38.889px;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}
.main_subtext {
  font-size: 22.222px;
  color: rgba(0, 0, 0, 0.988);
}
<figure class="images_class">
  <img src="http://i.imgur.com/sOCyriP.png" alt="" class="main_image" />
  <figcaption class="image_text">
    <div class="main_text">Main text</div>
    <div class="main_subtext">Subtext</div>
  </figcaption>
</figure>

Upvotes: 1

Related Questions