Search code examples
flexboxcenterdisplay

display flex does't work and impossible to centered the div

here my test https://jsfiddle.net/Artenis/nozv1nsf/#&togetherjs=yjibGnfDFM

could you please tell me where is my error

i would like the div which contain text (black opacity) is centered horizontally and vertically in relation to the background-image. The div with background-color black opacity won't take the total height but just the padding of div of text. this same div must be take all the width of the background. I use 

display:flex; justify-content:center; and content-align:center;

so far it has always worked, but not here.

Solution

  • This should fix your problem.

    .moncontenu{  color: rgb(255, 255, 255); text-shadow: 2px 4px 2px rgb(0, 0, 0); font-size: 33pt;width:100%; padding: 15px 0px !important; align-self: center;}

    (added align-self: center;)