Creating an oval in html with centered text

2 Views

I have a number of ovals I need to put into a WordPress page so it looks like; 

oval - paragraph
paragraph - oval
oval - paragraph
paragraph - oval
oval - paragraph

I have no problems creating the oval, however I need to style it so no matter what heading text I put into each oval – it stays uniform.

Read More

I have put hard values in using padding-top however for 1 line headers this is no longer going to be centered.

How can I approach this better? 

div {
  background-color: #1468a8;
  width: 300px;
  height: 150px;
  margin: 100px auto 0px;
  border-radius: 50%;
  color: white;
  font-size: 1.6em;
}
p {
  text-align: center;
  padding-top: 14%;
}
<div>
  <p>Accepting Divergence;
    <br/>Affirming Values
  </p>
</div>

https://jsfiddle.net/gcampton/QGtzW/1025/

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. You can remove the height of the div and use top/bottom padding to center the text verticaly :

    demo

    div {
  background-color: #1468a8;
  width: 300px;
  margin: 5px auto;
  border-radius: 50%;
  color: white;
  font-size: 1.6em;
}
p {
  text-align: center;
  margin:0;
  padding: 14% 0;
}
    <div>
  <p>Accepting Divergence;
    <br />Affirming Values</p>
</div>
<div>
  <p>Accepting Divergence;</p>
</div>

    NOTE: you also forgot the closing tag for the <p> element

  2. You can use following css to make div and text center. Use display: table; and table-cell will solved your issue.

    div {
    background-color: #1468a8;
    border-radius: 50%;
    color: white;
    display: table;
    font-size: 1.6em;
    height: 150px;
    margin: 0 auto;
    width: 300px;
}
p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

    Check Fiddle.

  3. See the fiddle, I have added two more oval in HTML, which contains different content, all three inherits same class still vertical and middle alignment is perfect for all three. here is fiddle for the same
    https://jsfiddle.net/nileshmahaja/rv7mnw7s/

    Below is my code

    The HTML

    <div>
  <p>Accepting Divergence; Affirming Values</p>
</div>

<div>
  <p>Accepting Divergence; Affirming Values & lorem ipsum
  </p>
</div>

<div>
  <p>Accepting Divergence</p>
</div>

    The CSS

    div {
  background-color: #1468a8;
  width: 300px;
  height: 150px;
  margin: 100px auto 0px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
    display:table-cell;
    vertical-align:middle;
}

p {
  text-align: center;
}