Question

我想知道..代码可能没有你想要的表现吗？我正在做一个小项目，在每个页面我都有一个按钮，可以带你回到家...但问题是，有一定的（我认为它也会出现在其他一些页面中）我是工作（我逐页工作，所以我知道我做了什么，不知道什么）和浮动没有设置中间的按钮..

<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div id="container">
        <div id="header">
            <h2>April</h2>
        </div>
        <!--ending header-->
        <div class="nav">
            <div id="red"><a href="Januaridata.php">Vakantie gegevens</a></div>
            <div id="indigo"><a href="Maartdata.php">Overwerk gegevens</a></div>
            <div id="green"><a href="Meidata.php">A.D.V gegevens</a></div>
            <div id="deeporange"><a href="Julidata.php">Reiskosten gegevens</a>
            </div>
            <!--ending the nav class-->
            <div id="footer">
                <a href="home.php"><img src="home-button.jpg" alt="Breng me terug"></a>
                <h2>Contact gegevens</h2>
            </div>
            <!--ending footer-->
        </div>
        <!--ending container-->

</body>




img {
    float: right;
    width: 100px;
    height: 100px;
    clear: both;
    margin: 0 50% 0 0;
}

现在我的问题是，如何在中间设置它以及按钮在其他页面上的行为怎么样？

注意：我注释掉了类导航，看看按钮会如何响应，并且在我拿出它之后它确实处于中心位置。所以我想问题必须是我的“a”中的问题吗？

.nav a {
width: 250px;
padding: 10px 16px;
float: left;
text-decoration: none;
list-style: none;
display: block;
margin: 2px 2px 0 0;
height:20vh;
line-height: 20vh;
text-align: center;
font-size: 150%;
color: black;
font-weight: bold;
border-radius: 12px;

}

Answer 1

当你需要居中图像时，不要使用％边距和浮动，因为这两者都非常依赖，元素附近还有其他元素。

您可以将图像设置为阻止并提供此自动边距：

img {
width: 100px;
height: 100px;
margin: 0 auto;
display: block;
}

<div id="container">
            <div id="header">
                <h2>April</h2>
            </div><!--ending header-->
                <div class="nav">
                    <div id="red"><a href="Januaridata.php">Vakantie gegevens</a></div>
                    <div id="indigo"><a href="Maartdata.php">Overwerk gegevens</a></div>
                    <div id="green"><a href="Meidata.php">A.D.V gegevens</a></div>
                    <div id="deeporange"><a href="Julidata.php">Reiskosten gegevens</a>
                </div><!--ending the nav class-->
            <div id="footer">
            <a href="home.php"><img src="home-button.jpg" alt="Breng me terug"></a>
            <h2>Contact gegevens</h2>
            </div><!--ending footer-->
        </div><!--ending container-->

Answer 2

计算机是一台计算机：它会按照您的要求执行。

大多数时候，问题来自你，而不是计算机。

这意味着在某个地方，您改变了某些内容，并且它影响了您的用户界面。

有很多方法可以将元素集中到一个容器中，浮动它并不是最好的方法。

如果您可以发布一些代码，例如CSS，或者甚至制作小提琴，我们可能会帮助您解决此问题。

某个编码值得信赖吗？

2 个答案: