Clever Geek Handbook

Creating an oval in html with centered text

I have some ovals that need to be placed on my WordPress page to make it look like this:

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

I have no problem creating the oval, but I need to style it, no matter what heading text I put in each oval - it stays consistent.

I used hard values ​​when using padding-top, however for 1 inline headers this will no longer 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>
Run codeHide result


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

+3


source to share


3 answers


You can use the following css to create div and text center. Use display: table;

and table-cell

to solve your problem.

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.

+2


source


You can remove the height div

and use top / bottom padding to vertically align the text:

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>
Run codeHide result


NOTE. You also forgot the closing tag for the element<p>

+3


source


Look at the fiddle, I have added two more ovals to the HTML which contains different content, all three inherit the same class, but the vertical and middle alignment is perfect for all three. here is a fiddle for the same https://jsfiddle.net/nileshmahaja/rv7mnw7s/

Below is my code

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>

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;
}
+2


source






More articles:


All Articles