Question

我的页面中心有一个大圆圈设计，这段代码完美无缺。

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

我想将CENTERED文本放在所述圈子中。我想尽可能使用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>

Answer 1

如果将.nav放在图像所在的同一div中，并将div设置为相对位置，如果图像在其包含的div中居中，则文本应与图像保持一致。

将文本居中固定在50％居中的固定图像中

1 个答案: