html - 某种编码值得信赖吗?

标签 html css

我想知道.. 代码会不会像你希望的那样运行? 我正在做一个小元素,在每个页面中我都有一个按钮,可以带你回到主页。但问题是,有一个特定的(我认为它也会在其他一些页面中)我是工作(我一页一页地工作,所以我知道我做了什么,什么没做)并且 float 没有将按钮设置在中间..

<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;
}

现在我的问题是,我怎样才能将它设置在中间,为什么按钮的行为不像在其他页面上那样?

注意:我注释掉了 nav 类以查看按钮将如何响应,并且在我将其删除后它确实居中。所以我想问题一定出在我的“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;

最佳答案

当你需要居中图片时,不要使用 % margins 和 floating,因为这两者都非常依赖于元素附近有哪些其他元素。

您可以将图像设置为 block 并为其提供自动边距:

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-->

关于html - 某种编码值得信赖吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48377593/

相关文章:

jquery - 我的固定菜单导航标题不会留在它所在的 div 中。这是一个响应问题吗?

javascript - 如何在没有javascript的情况下通过点击他的 child 来更改父元素的CSS属性

html - 显示 Table-Cell 和 Vertica-Align Middle 不适用于属性集

javascript - 如何自动调整tinyMCE的大小?

html - 具有可滚动内容的 CSS 灵活高度

html - 内部 div 元素通过外部滚动条滚动

css - 在另一个图像之上添加一个图像

css - 自定义 CSS : Using All-In-One Cufon in the Header

html - 使用::after 和图像标签?

javascript - 在 ASP.NET MVC 应用程序中渲染 iframe 内的部分 View