Centering date infront of background

HTML & CSS
1

are there any examples that can help me out with this problem? i am trying to fit the date into shapes. let’s start with the triangle. if the date has two digits it will sit nice and centered, with one it doesn’t.


#date{
width:64px;

}

#date h4{
background-image:url(http://triangle.png);
background-repeat:no-repeat;
font-size:24px;
background-position:left;
padding-left:20px;
padding-top:25px;
margin-bottom:10px;
color:#5AAECF;
}

.month{
background-color:green;
padding:2px 17px; 0px 10px
color:white;
}
2

No, I don’t think that’s necessary. Indeed, you could dispense with the div around the paragraph too if you really want to be efficient. You can style the P element to do just what the wrapping div is doing.

3

thank you that works well in these situations. just to let you know my html though.


<div id="date" class="grid_1" >
<h4>20</h4>

<div id="month">

<p>Feb</p>
</div> <!-- end month div -->

</div> <!-- end date div -->

should the triangle get its own div?

4

Without seeing your HTML, it’s not clear what is what, but have you tried text-align? E.g.

#date h4{
  text-align: center;
}
5

It may just be a typo in your post but you have .month as a class in the css and then you have it as an ID in the html.

I would agree with ralph that all you need to do is style the “p”, you may need to reset the margins to zero now to remove any defaults if you haven’t done so already.

<p class="month>Feb</p>