I've been working on adding background images to the buttons on my homepage. However, I'm facing an issue where everything aligns to the left after adding additional divs inside the main "myclass" div. What I really want is for everything to be centered. Is there a way to achieve this?
<div class="myclass">
<a href="link"><div id="Home"></div></a>
<a href="link"><div id="About"></div></a>
<a href="link"><div id="FAQ"></div></a>
<a href="link"><div id="Contact"></div></a>
</div>
.myclas {
background:#F5CA0D;
max-width:100%;
display: block;
text-align: center;
}
#Home {
margin:0 auto;
width:211px;
height:109px;
transition: background-image 1s ease-in-out;
background-image:url("images/Home.jpg");
float:left;
clear:right;
}
#Home:hover {
background-image:url("images/Home-hover.jpg");
}
#About {
margin:0 auto;
width:211px;
height:109px;
transition: background-image 1s ease-in-out;
background-image:url("images/About.jpg");
float:left;
clear:right;
}
#About:hover {
background-image:url("images/Oahu-hover.jpg");
}
#FAQ {
margin:0 auto;
width:211px;
height:109px;
transition: background-image 1s ease-in-out;
background-image:url("images/FAQ.jpg");
float:left;
clear:right;
}
#FAQ:hover {
background-image:url("images/FAQ-hover.jpg");
}
#Contact {
margin:0 auto;
width:211px;
height:109px;
transition: background-image 1s ease-in-out;
background-image:url("images/Contact.jpg");
float:left;
clear:right;
}