CODEWITHSUNDEEP
htmlcssgeometry
PLAYCUBE
PLAYCUBE

Reputation: 875

How to center text in a circle within a list?

I am trying to make some sort of a "2 option choice game" by using two circles as buttons. Within the circle there should be a text, which is centered and does not stick out from the circle. But, when the text is too large, it sticks out underneath the circle.

HTML: 

<body>
<header>
<h1>Choose</h1>
</header>

<ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bycicle with friends</li>
</ul>

</body>

CSS:

h1 {
    text-align: center;
    font-family: 'oswalditalic';
    font-size: 48px;
    margin: 0;
}
ul{
    text-align: center;
    padding: 0;
}


ul li{
    font-family: 'oswalditalic';
    display: inline-block;
    list-style-type: none;
    margin:15px 20px;
    color: black;
    font-size: 26px;
    text-align: center;

    height: 300px;
    width: 300px;
    line-height: 300px;

    -moz-border-radius: 50%;
    border-radius:50%;

    background-color: blue;
}

https://jsfiddle.net/sf3dquLs/

Upvotes: 1

Views: 606

Answers (2)

Nutshell
Nutshell

Reputation: 8537

It's because of the value of the line-height to vertically center content. It works when there's one line but with two or more lines, it apply the 300px line-height and it is too much.

You can use display:table-cell combined with vertical-align: middle to make it works instead.

h1 {
    text-align: center;
    font-family: 'oswalditalic';
    font-size: 48px;
    margin: 0;
}
ul{
    text-align: center;
    padding: 0;
    display: table;
    margin: auto; 
    border-spacing: 30px;
}


ul li{
    font-family: 'oswalditalic';
    display: inline-block;
    list-style-type: none;
    margin:15px 20px;
    color: black;
    font-size: 26px;
    text-align: center;
    display: table-cell; 
    height: 300px;
    width: 300px;
    -moz-border-radius: 50%;
    border-radius:50%;
    vertical-align: middle;
    background-color: blue;
}
<body>
<header>
<h1>Choose</h1>
</header>

<ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bycicle with friends</li>
</ul>

</body>

Upvotes: 2

JohannesB
JohannesB

Reputation: 2015

The problem you are facing is due to the line-height:300px. The effect of this is that every line (also after word-wrapping) will occupy 300px. I see that you added this property to center your text. So if we remove the line we must find another way to accomplish the centering. Another possible way is to use a :before element and giving it a certain height.

h1 {
  text-align: center;
  font-family: 'oswalditalic';
  font-size: 48px;
  margin: 0;
}
ul {
  text-align: center;
  padding: 0;
}
ul li {
  font-family: 'oswalditalic';
  display: inline-block;
  list-style-type: none;
  margin: 15px 20px;
  color: black;
  font-size: 26px;
  text-align: center;
  height: 300px;
  width: 300px;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: blue;
  word-wrap: break-word;
}
ul li:before {
  display: block;
  height: 120px;
  content: "";
}
<body>
  <header>
    <h1>Choose</h1>
  </header>

  <ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bicycle with friends</li>
  </ul>

</body>

Upvotes: 2

Related Questions