个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想知道.. 代码会不会像你希望的那样运行？我正在做一个小元素，在每个页面中我都有一个按钮，可以带你回到主页。但问题是，有一个特定的(我认为它也会在其他一些页面中)我是工作(我一页一页地工作，所以我知道我做了什么，什么没做)并且 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/
25
4
0
我是一名优秀的程序员,十分优秀！