1

i'm using absolute element inside of flexbox. My code working on chrome, but firefox not centering my absolute element, and scaling my image.

here is my code

<figure class="banner">
  <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" />
  <figcaption>
    <p>TEXT</p>
    <h3>TİTLE</h3>
    <p>TEXT</p>
    <a href="#">DETAIL</a>
  </figcaption>
</figure>

css:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; z-index:1; color:@white; text-align:center; width:90%; align-self:center; background:#f00;}

https://jsfiddle.net/nbqtn678/

Eren Akkus
  • 471
  • 4
  • 11
  • Flexbox doesn't fare well with absolute positioning in most browsers. There are multiple ways of achieving the layout you made in the jsfiddle, but I if the image can be an background-image or that is should be a loose item inside the banner. Is any other solution acceptable as long as the result is the same? Because then I could whip up some examples. – Paul van den Dool Feb 06 '17 at 08:24
  • Hi paul, i'm searching true way. so what is your suggestion. – Eren Akkus Feb 06 '17 at 08:53

2 Answers2

1

Like I said in my comment, position: absolute doesn't really play nice with flexbox in most browsers.

Here are some solutions that have the same result.

Flexbox solution with image as background:
https://jsfiddle.net/PaulvdDool/v8L99tp4/1/

Flexbox solution with image as loose element:
https://jsfiddle.net/PaulvdDool/v8L99tp4/2/

It can be done without flexbox. So here two fallback solutions for those people still using IE8 or IE9.

Background image solution without flexbox:
https://jsfiddle.net/PaulvdDool/v8L99tp4/4/

Loose image solution without flexbox:
https://jsfiddle.net/PaulvdDool/v8L99tp4/3/

Update
I read your comment on the other answer. You said you want the banner to take the height of the image. So here's that fix.
https://jsfiddle.net/PaulvdDool/v8L99tp4/6/

Paul van den Dool
  • 3,020
  • 3
  • 20
  • 44
0

you do not need position absolute to center your content, use margin 0 auto to figcaption.

.banner figcaption{ margin: 0 auto; ...}

remove position abloute.

Edit: if you want to have the image as a background:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner img{position: absolute}
.banner figcaption{margin: 0 auto; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; }

Edit 3:

if you want to use the height of the image, do not change anything, just add left: 5%:

.banner{display:flex; overflow:hidden; justify-content:center; position:relative; width:350px;}
.banner figcaption{position:absolute; left: 5%; z-index:1; color:#fff; text-align:center; width:90%; align-self:center; background:#f00;}
A7S
  • 141
  • 1
  • 8