+ 1

Why does the p tag not align vertically in the flexbox?

<!doctype html> <html> <head> <title>My Image</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; position:relative; } img{ position:absolute; width:100%; height:auto; top:0; left:0; z-index:-1; } div{ position:relative; top:0; left:0; width:100%; height:auto; display:flex; justify-content:center; align-items:center; } p{ position:relative; font-size:100px; color:white; z-index:1; } </style> </head> <body> <div id="main"> <img src="data:text/html;base64,Base64 Encoded"> <p>PLACEHOLDER TEXT</p> </div> </body> </html>

html css

4th Dec 2020, 1:40 AM

Jeremy Cruz