CODEWITHSUNDEEP
cssflexbox
None
None

Reputation: 9247

align text vertically over image with flex?

I want to align text vertically over an image with flex. Is that possible? Text need to be one below another... https://jsfiddle.net/e3x8dw1d/ This is my fiddle.

<div class="advertisement">
    <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" />
            <div class="advertisment_text">
                <div class="advertisement_title">Your ad can be here</div>
                <div class="advertisment_subtitle">ADVERTISE WITH </div>
            </div>
</div>

Upvotes: 0

Views: 114

Answers (2)

Pierre ARNOU
Pierre ARNOU

Reputation: 91

I have only edited your CSS. Placed the tiger in the background image, placed the text on top of it and centered it : https://jsfiddle.net/qaeL0yvj/

    .advertisement{
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
  background-image: url('http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg');
  background-size: 1000px 500px;
  height: 500px;

}
.advertisement img{
    width: 100%;
    height: 100%;
}
.advertisment_text{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  text-align: center;
  margin-top: 20%;
}

.advertisement_title{
    font-family: 'PlayfairDisplay-Regular';
    font-size: 36px;
    color: white;
    width: 100%;
}
.advertisment_subtitle{
    font-family: 'proximanova-semibold-webfont';
    color: white;
    font-size: 13px;
    width: 100%;
}

Does that work?

Cheers, Pierre

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105853

You need to set flex-flow to column (or flex-direction) :

.advertisement {
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}
.advertisement img {
  width: 100%;
  height: 100%;
}
.advertisment_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-flow:column;
  justify-content: center;
  align-items: center
}

/* below no width neede , but eventually margins or padding */
.advertisement_title {
  font-family: 'PlayfairDisplay-Regular';
  font-size: 36px;
  color: white;
  /*margin:auto 1em;*/
}
.advertisment_subtitle {
  font-family: 'proximanova-semibold-webfont';
  color: white;
  font-size: 13px;
  /*margin:auto 1em;*/
}
<div class="advertisement">
  <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" />
  <div class="advertisment_text">
    <div class="advertisement_title">Your ad can be here</div>
    <div class="advertisment_subtitle">ADVERTISE WITH SKYMO</div>
    </div

https://jsfiddle.net/e3x8dw1d/4/

Upvotes: 1

Related Questions