0
How can I set up CSS to always make alternative text middle-centered in the tag <img/> in Google Chrome browser?
In firefox apply only display: flex or inline-flex with align-items: center and justify-content: center but unfortunately it is not a crossbrowser solution.
#Img {
background-color: rgb(0,0,0);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgb(255,255,255);
width: 200px;
height: 100px;
}<img id='Img' src="" onerror="this.alt = `Can't speak Hello world!`" alt="Hello wolrd">
Dude I actually think you’re misstyling your "broken image" look at this very similar question I asked myself. And look at the answers. The one closest to yours is the three-point answer right now. https://answall.com/questions/321138/como-fazer-um-stilo-para-imagem-quebrada-quando-a-imagem-n%C3%A3o-load if that’s what you need to tell me, then we vote to close this as duplicate ok. For now I have removed my reply which was incomplete.
– hugocsl
@hugocsl I checked the answer there. Unfortunately it doesn’t automatically leave the same center as the solution I use in firefox. I would always have to program the
top: valorwith midia-query to "center" whenever resolution changes.– ayelsew
So it gets really complicated, give a look tb at the other options there with JS etc. sometimes something suits you...
– hugocsl