Question

如果它更容易，这就是codepen。我也是初学者，只是一个抬头。

我的问题是，每当我将鼠标悬停在此圈子上时，它会将页面大小扩展到足以在圆圈达到最大大小时出现滚动条。我不知道如何解释，我只是不希望这种情况发生......

另外，我无法让该圈子中心的文字直接在中心显示。我觉得我已经尝试了我能想到的每一个CSS属性。

最后，我们将非常感谢任何有关让这个圈子保持在最常见屏幕分辨率中心的提示。我的边距设置为百分比，似乎没问题。

HTML：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Echoes from Firelink</title>
        <link href="homepage.css" type="text/css" rel="stylesheet">
        <link rel="shortcut icon" href="coiledsword.ico">
    </head>

    <header>
                <a href="homepage.htm" style="color:black">home | </a>
                <a href="homepage_easy.htm" style="color:black">lite version</a>
            </header><!--End header-->
    <body>
        <div id="background_container">
            <div id="content_container">
            <p>From Software homepage</p>
            </div>
        </div>
    </body>
</html>

CSS：

/* CSS page for the homepage. */

header {
    text-align: center;
    font-size: 10px;
}
#content_container {
    background-color: black;
    text-align:center;
    color: white;
    height: 200px;
    width: 200px;
    margin: 20% 45% 20% 45%;
    border-radius: 50%;
    transition: 2s;
}

#content_container:hover {
    transform: scale(1.4);
}

Answer 1

您需要更改保证金，不要使用百分比值。

如果您需要将文本中心只是下面的代码中心到父元素。

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

css代码：

header {

    text-align: center;
    font-size: 10px;
}
#content_container {
   display:flex;
   justify-content:center;
   align-items:center;
    background-color: black;
    text-align:center;
    color: white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    transition: 2s;
}

#content_container:hover {
    transform: scale(1.4);
}

转换属性扩展了网页，也存在中心问题

1 个答案: