Center text on top of an image
Question
I'm making a website and I need to center a text in an image. I've tried margin in the CSS code but is still isn't working. I'm using the images as a background to my text because it will simplify an animation that I will add later. If the image as a background doesn't work, I can always find a way around it. How can I do this? What I'm trying isn't working.
EDIT: Sorry, I forgot to include that the text I'm trying to center is the .IOStext (In CSS). I'm trying to get it in the middle of the Moon .
My Code:
@font-face { font-family: UDFont; src: url(gomarice_gogono_cocoa_mochi.ttf); } body { background-image: url(background.png); background-repeat: no-repeat; background-size: cover; background-color: #101423; min-width: 100%; min-height: 100%; font-family: 'UDFont', Impact, Helvetica, Arial, Sans-serif; } #header { width: 50%; margin: 100px auto; } #headerContent { width: 300px; margin: auto; } #mainTitle { width: 100%; margin: auto; text-align: center; } .universeTitle, .devTitle { font-size: 3em; margin: auto; text-align: center; } .universeTitle { color: #74aeee; } .devTitle { color: #f1ab3c; } .slogan { color: #822E81; text-align: center; margin: 10px auto; width: 100%; } #content { } #selectors { } #IOSselector { margin: auto; width: 300px; height: 300px; background-image: url(IOSMoon.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .IOStext { text-align: center; margin: auto; margin-top: auto; width: 100%; height: 50px; }
<!DOCTYPE html> <html> <head> <title>Welcome! | Universe Dev</title> <link rel="shortcut icon" type="image/png" href="icon.png"/> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="header"> <div id="headerContent"> <div class="mainTitle"> <span class="universeTitle">Universe </span><span class="devTitle">Dev</span> </div> <h3 class="slogan">Universal Development</h3> </div> </div> <div id="content"> <div id="selectors"> <div id="IOSselector"> <h1 class="IOStext">IOS</h1> </div> <script src="script.js"></script> </body> </html> <!-- END -->
1 answers
solution1
2 2018-03-27 15:57:09
You could use flex on your "moon" and then make you text inline-block:
#IOSselector { margin: auto; width: 300px; height: 300px; background-image: url(http://via.placeholder.com/300x300); background-size: cover; background-repeat: no-repeat; background-position: center; display:flex; justify-content: center; align-items: center; } .IOStext { margin: auto; margin-top: auto; display:inline-block; }
<div id="IOSselector"> <h1 class="IOStext">IOS</h1> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.