伙计们!拜托，有人可以写出如何相对于 .footer 水平居中 .fl 和 .fr 吗？我使用像素来做一些类似于居中的事情，但我需要编辑以使元素居中。
这是 HTML:
<!DOCTYPE html>
<head>
<title>Google</title>
<meta charset="utf-8">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="footer">
<div class="fl">
<a href="#" class="fle al">Advertising</a>
<a href="#" class="fle al">Business</a>
<a href="#" class="fle al">About</a>
</div>
<div class="fr">
<a href="#" class="fre al">Privacy</a>
<a href="#" class="fre al">Terms</a>
<a href="#" class="fre al">Settings</a>
<a href="#" class="fre al">Use Google.com</a>
</div>
</div>
</body>
</html>
这是 CSS:
.footer {
color: #666;
background: #f2f2f2;
border-top: 1px solid #e4e4e4;
position: absolute;
bottom: 0;
font-size: 13px;
height: 37px;
width:100%;
}
.fl {
white-space: nowrap;
position:absolute;
top:12px;
}
.fr {
white-space: nowrap;
position:absolute;
top:12px;
right:0;
}
.fle {
margin-left: 30px;
}
.fre {
margin-right: 30px;
}
.al:hover {
text-decoration:underline;
cursor:pointer;
}
a {
color:inherit;
text-decoration:inherit;
}
最佳答案
像下面这样改变你的 fl 和 fr 类:
.fl {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: left;
}
.fr {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
}
关于html - 如何使 block 相对于另一个 block 水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44220686/