CODEWITHSUNDEEP
htmlcssalignmentshapes
Shinji-san
Shinji-san

Reputation: 1001

Vertical aligning in specific shapes CSS

I already checked this thread out Is it possible to vertically align text within a div?

But it's not working for me. I want the text in the center of the oval, but it's not working. Maybe because it's a different shape? Is there a possible way for me to code it to work for ovals? The text is horizontally centering but not vertically.

HTML: 

<div class="oval"> <span> Strawman </span> </div>

CSS:

.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;
}

Upvotes: 0

Views: 387

Answers (1)

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

Try this stylesheet and it should help you

<style>
        .oval {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            display: table;
            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 {
            display: table-cell;
            vertical-align: middle;
        }

    </style>

Upvotes: 1

Related Questions