Currently attempting to convert my design into HTML and CSS for the first time, I've hit a roadblock with this particular task:
I'm trying to create a series of white boxes, with each item having a white border. However, I'm struggling to center the Label Tag horizontally. Additionally, after changing the img Label to block display, I can't seem to add padding or margin to create sufficient space between the label and the image.
This is what I have so far:
Html:
<div class="content">
<div class="container">
<ul class="grid">
<li><img src="img/Icon-House.png"><label>Houses</label></li>
</ul>
</div>
</div>
CSS:
.content{
background-color: #e24840;
width: 743px;
height: 300px;
margin-top: 48px;
margin-left: 183px;
border-radius: 4px;
box-shadow: -5px 5px 10px #888888;
}
.content ul {
float: left;
}
.content li {
margin: 20px;
width: 200px;
height: 180px;
border-color: white;
border-width: 2px;
border-radius: 4px;
border-style: solid;
}
.content img{
margin-left: auto;
margin-right: auto;
margin-top: 25px;
display: block;
}
.content label{
margin-top: 48px;
margin-right: auto;
margin-left: auto;
}