Centering text into rounded div

Question

I've a problem with vertical centering my H2 and H4 elements into div which has 50% border radius. It looks like:

Of course I would like to center this text even on small devices. I had a problem with centering rounded div's so I use for them display: table, so I fear that it determine that I can't center text in easy way. Do you have any ideas?

    .meals
 {
  width: 100%;
  margin-top: 60px;
  display: flex;
 }
  

 @media screen and (max-width: 600px)
 {
  .meals
  {
   flex-direction: column;
   align-items: center;
  }
  .meals-box
  {
   width: 100%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 600px) and (max-width: 960px)
 {
  .meals
  {
   flex-direction: row;
   flex-wrap: wrap;
  }
  .meals-box
  {
   width: 50%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 960px)
 {
  .meals
  {
   flex-direction: row;
  }
  .meals-box
  {
   width: 25%;
   display: table;
     position: relative;
  }

 }

 .burgers-overlay
 {
  background: url(img/Burger-Craft-139.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .hot-dogs-overlay
 {
  background: url(img/Burger-Craft-123.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .bowls-overlay
 {
  background: url(img/Burger-Craft-72.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .salads-overlay
 {
  background: url(img/Burger-Craft-44.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .meals-text
 {
  background-color: #FFF;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  box-shadow: 1px 1px 5px #000;
  margin: 0 auto;
 }

 .meals-text h2, .meals-text h4
 {
  text-align: center;
 }

    <section class="meals">
   <div class="meals-box">
    <div class="burgers-overlay">
     <div class="meals-text">
      <h2>Burgers</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="hot-dogs-overlay">
     <div class="meals-text">
      <h2>Hot dogs</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="bowls-overlay">
     <div class="meals-text">
      <h2>Bowls</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="salads-overlay">
     <div class="meals-text">
      <h2>Salads</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
  </section>

@mariusz check now..please accept if it's usefull – ADH - THE TECHIE GUY Jun 24 '18 at 08:26 — ADH - THE TECHIE GUY, Jun 24 '18 at 08:26

ADH - THE TECHIE GUY · Accepted Answer · 2018-06-24T08:25:31.370

yes you can do by using css flex box property.I'm added the snippet below.

just add

display:flex;
justify-content:center;
align-items:center;
flex-direction: column;

to your .meals-text class .it works fine

.meals
 {
  width: 100%;
  margin-top: 60px;
  display: flex;
 }
  

 @media screen and (max-width: 600px)
 {
  .meals
  {
   flex-direction: column;
   align-items: center;
  }
  .meals-box
  {
   width: 100%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 600px) and (max-width: 960px)
 {
  .meals
  {
   flex-direction: row;
   flex-wrap: wrap;
  }
  .meals-box
  {
   width: 50%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 960px)
 {
  .meals
  {
   flex-direction: row;
  }
  .meals-box
  {
   width: 25%;
   display: table;
     position: relative;
  }

 }

 .burgers-overlay
 {
  background: url(img/Burger-Craft-139.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .hot-dogs-overlay
 {
  background: url(img/Burger-Craft-123.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .bowls-overlay
 {
  background: url(img/Burger-Craft-72.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .salads-overlay
 {
  background: url(img/Burger-Craft-44.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .meals-text
 {
  background-color: #FFF;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  box-shadow: 1px 1px 5px #000;
  margin: 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    
 }

 .meals-text h2, .meals-text h4
 {
  text-align: center;
 }

<section class="meals">
   <div class="meals-box">
    <div class="burgers-overlay">
     <div class="meals-text">
      <h2>Burgers</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="hot-dogs-overlay">
     <div class="meals-text">
      <h2>Hot dogs</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="bowls-overlay">
     <div class="meals-text">
      <h2>Bowls</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="salads-overlay">
     <div class="meals-text">
      <h2>Salads</h2>
      <h4>View menu</h4>
     </div>
    </div>
   </div>
  </section>

It's okay but my rounded div's go left [link](pl.tinypic.com/r/23t311f/9) — Mariusz, Jun 24 '18 at 07:35

Shazvan Hanif · Answer 2 · 2018-06-24T07:50:02.677

.meals
 {
  width: 100%;
  margin-top: 60px;
  display: flex;
 }
  

 @media screen and (max-width: 600px)
 {
  .meals
  {
   flex-direction: column;
   align-items: center;
  }
  .meals-box
  {
   width: 100%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 600px) and (max-width: 960px)
 {
  .meals
  {
   flex-direction: row;
   flex-wrap: wrap;
  }
  .meals-box
  {
   width: 50%;
   display: table;
     position: relative;
  }

 }

 @media screen and (min-width: 960px)
 {
  .meals
  {
   flex-direction: row;
  }
  .meals-box
  {
   width: 25%;
   display: table;
     position: relative;
  }

 }

 .burgers-overlay
 {
  background: url(img/Burger-Craft-139.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .hot-dogs-overlay
 {
  background: url(img/Burger-Craft-123.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .bowls-overlay
 {
  background: url(img/Burger-Craft-72.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .salads-overlay
 {
  background: url(img/Burger-Craft-44.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
  display: table-cell;
    vertical-align: middle;
 }

 .meals-text
 {
  background-color: #FFF;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  box-shadow: 1px 1px 5px #000;
  margin: 0 auto;
 }

 .meals-text h2, .meals-text h4
 {
  text-align: center;
 }
 .center{
  width: 170px;
  height: 170px;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
  position: relative;
  display: table-cell;
 }

   <section class="meals">
   <div class="meals-box">
    <div class="burgers-overlay orly">
     <div class="meals-text">
      <div class="center">
       <h2>Burgers</h2>
       <h4>View menu</h4>
      </div>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="hot-dogs-overlay orly">
     <div class="meals-text">
      <div class="center">
      <h2>Hot dogs</h2>
      <h4>View menu</h4>
      </div>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="bowls-overlay orly">
     <div class="meals-text">
      <div class="center">
      <h2>Bowls</h2>
      <h4>View menu</h4>
      </div>
     </div>
    </div>
   </div>
   <div class="meals-box">
    <div class="salads-overlay orly">
     <div class="meals-text">
     <div class="center">
      <h2>Salads</h2>
      <h4>View menu</h4>
     </div>
     </div>
    </div>
   </div>
  </section>

It's okay but my rounded div's go left [link] (http://pl.tinypic.com/r/23t311f/9) — Mariusz, Jun 24 '18 at 07:30

Centering text into rounded div

2 Answers2