Центрирование текста внутри изображения с фиксированным 50% центрированием

#html #css

#HTML #css

Вопрос:

У меня есть дизайн большого круга, расположенный в центре моей страницы, этот код работает отлично.

 #big_center{
position: fixed;
top: 50%;
left: 50%;
margin-top: -287px;
margin-left: -280px;
list-style-type: none;}

Я хочу расположить текст по центру внутри указанного круга. Я хотел бы использовать CSS, если это возможно, но не возражал бы против решения на JS.

Прямо сейчас я могу центрировать текст и изменять размер страницы, но, похоже, он перемещается не так хорошо, как мое изображение.

 .nav{
left: 0;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    left: 40%;
    width: 100%;
    list-style-type: none;}

.nav a{
    text-decoration: none;
    font-family:"Century Gothic";
    font-size:50px;
    font-weight:bold;
    line-height:120%;
    color:rgb(255,255,255);
    text-align:center;
    list-style-type: none;}

БОНУСНЫЕ БАЛЛЫ, если вы сможете удалить мои маркеры… как вы можете видеть, я пытался и потерпел неудачу.

   <!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="../css/basic.css">
</head>
<body>
    <div>
        <img src="../img/s_logo.png" id="logo">
    </div>

    <div>
        <img src="../img/b_logo.png" id="big_center">
    </div>

    <div class="nav">
        <ul>
            <li><a href="portrait.html">PORTRAIT</a></li>
            <li><a href="commercial.html">COMMERCIAL</a></li>
            <li><a href="fineart.html">FINE-ART</a></li>
        </ul>
    </div>

</body>



</html>

Ответ №1:

Если вы поместите файл .nav в тот же div, в котором находится изображение, и установите для этого div значение position relative, текст должен остаться с изображением, если изображение центрировано в содержащем его div.

1. Хорошо, я попробовал это, и это определенно на правильном пути. Я думаю, у вас правильная идея, но не могли бы вы, возможно, быть немного более ясными в своей формулировке или опубликовать пример в виде кода?

2. @newbyJP Прямо сейчас я не там, где могу легко проиллюстрировать с помощью кода. Если вы объясните, где я был неясен, я попытаюсь объяснить это подробнее или я попытаюсь опубликовать пример позже, если вы все еще не нашли решение.

3. Все в порядке, доработал его до такой степени, что он работал должным образом. спасибо за помощь!