我正在尝试放置一个圆形的 Instagram 图标，以便它始终以着陆页底部为中心。到目前为止我所有的努力，例如使用 position:fixed;当屏幕尺寸发生变化时，图标不会保留在我的其余内容下方。
我的html是这样的:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
<a href="#" class="hvr-sweep-to-right">Portfolio</a>
<a href="#" class="hvr-sweep-to-bottom">Contact</a>
<a href="#" class="hvr-sweep-to-left">About Me</a>
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
<a href="#" class="fa fa-instagram" id="fix"></a>
</div>
</div>
</section>
</body>
</html>
我的 CSS 是这样的:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
@font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
@font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
任何帮助将不胜感激，谢谢:)
最佳答案
修改了两处代码。
1。 .foot
left: 50% plus margin-left: - { width }/2 无论窗口如何变化，都可以使页脚居中对齐。
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2。 .fa
在您的代码中，Instagram 图标未在黑色圆圈内居中对齐，因此我对其进行了一些更改。
由于 Instagram 图标是方形的，当 font-size 为 55px 时，您不应将 width 设置为 40px。
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
如果您对我的回答有更多疑问，请随时与我联系:)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
@font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
@font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
<a href="#" class="hvr-sweep-to-right">Portfolio</a>
<a href="#" class="hvr-sweep-to-bottom">Contact</a>
<a href="#" class="hvr-sweep-to-left">About Me</a>
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
<a href="#" class="fa fa-instagram" id="fix"></a>
</div>
</div>
</section>关于html - 如何使用 CSS 将链接放置在响应式着陆页的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49831491/