Как центрировать текст по кругу в списке?

Я пытаюсь сделать что-то вроде «игры с двумя вариантами выбора», используя два круга в качестве кнопок. Внутри круга должен быть текст, который центрирован и не торчит из круга. Но, когда текст слишком велик, он торчит под кругом.Как центрировать текст по кругу в списке?

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/

источник

2016-05-19 PLAYCUBE

Non программирования, связанные с предложением: ружья должен быть велосипед. – JohannesB

Это из-за стоимости line-height в вертикальном центре содержания. Он работает, когда есть одна строка, но с двумя или более строками, она использует высоту линии 300px, и это слишком много.

Вы можете использовать display:table-cell в сочетании с vertical-align: middle, чтобы заставить его работать.

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>

источник

2016-05-19 21:01:35

Спасибо Винсент. Но когда один круг имеет меньше строк текста, чем другой, тот с меньшим количеством промахов немного ... – PLAYCUBE

А, прости, я имел в виду другое предложение кода. Но знаете ли вы, как получить больше пространства между кругами? – PLAYCUBE

Поскольку я изменяю тип отображения элемента ul, вы можете использовать 'border-spacing' для создания некоторого пробела (см. Обновленный фрагмент) –

Проблема вы столкнулись обусловлено line-height:300px. Эффект от этого заключается в том, что каждая строка (также после обертывания слов) будет занимать 300 пикселей. Я вижу, что вы добавили это свойство в центр вашего текста. Поэтому, если мы удаляем линию, мы должны найти другой способ достижения центрирования. Другой возможный способ - использовать элемент: before и дать ему определенную высоту.

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>

источник

2016-05-19 21:09:39 JohannesB

Он отлично работает с двумя строками, но что, если вы добавите третью или четвертую строку? ;) –

Тогда вы можете создать вертикальное выравнивание с div, используя позицию relative и transform translateY. [Link] (https://jsfiddle.net/sf3dquLs/3/). Мне не нравится изменять отображение элемента li в table-cell, это просто не сделано для этого. – JohannesB

Спасибо Rsauxil. Можно ли получить больше пространства между кругами? – PLAYCUBE

Как центрировать текст по кругу в списке?

ответ

Смежные вопросы