I tried looking into this issue in the thread about vertically aligning text within a div, but unfortunately, the suggested solution didn't work for me. I specifically need to center text within an oval shape, but it seems like the provided code only works for rectangular shapes. Is there a way to modify the code to achieve vertical alignment within ovals? Currently, the text is horizontally centered but not vertically.
Here is the HTML snippet:
<div class="oval"> <span> Strawman </span> </div>
These are the CSS styles applied:
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
display: inline-block;
box-sizing: content-box;
width: 200px;
height: 50px;
padding: 5px;
border: none;
-webkit-border-radius: 47% / 50%;
border-radius: 47% / 50%;
font: normal 100%/normal "Courier New", Courier, monospace;
color: white;
text-align: center;
vertical-align: middle;
-o-text-overflow: clip;
text-overflow: clip;
background: #99cc00;
}
.oval span {
vertical-align: middle;
}