I'm trying to center text in an image on my website, but I am having trouble with using the margin property in CSS. The text needs to be centered within the image as it will be part of an animation later on. If using the image as a background doesn't work out, I can find an alternative solution. How can I achieve this? My current approach doesn't seem to be working.
EDIT: Apologies for missing this earlier, but the text I want to center is the .IOStext in the CSS file. It should be positioned in the middle of the Moon.
Here is 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 -->