Html 如何使用CSS将链接定位在响应性登录页的底部_Html_Css

Html 如何使用CSS将链接定位在响应性登录页的底部

html css

Html 如何使用CSS将链接定位在响应性登录页的底部,html,css,Html,Css,我试图定位一个圆形instagram图标，使其始终位于登录页底部的中心位置。我迄今为止的所有努力，如使用位置：固定；导致屏幕大小更改时，图标不会保留在我的其他内容下方我的html如下所示： <!DOCTYPE html> <html> <head> <title>RBM Makeup</title> <link rel="stylesheet" type="text/css" href="style.css

我试图定位一个圆形instagram图标，使其始终位于登录页底部的中心位置。我迄今为止的所有努力，如使用位置：固定；导致屏幕大小更改时，图标不会保留在我的其他内容下方

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

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

非常感谢您的帮助：）

将家长设置为

.intro {
  width:100%;
  height:100vh;
  position:relative;
}

图标元素为

.footer {
  position:absolute;
  bottom:0;
  left:50%;
  width:40px;
  margin-left:-20px;
}

作为替代方案：

.footer {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  text-align:center;
}
.footer > div {
  display:inline-block;
}

这样做会更好，因为如果您最终想要添加其他链接，您可以添加其他元素

修改代码的两个位置

1. <代码>脚

left:50%加上左边距：-{width}/2

可以使页脚对齐中心，无论窗口如何更改

```

2. <代码>.fa 在您的代码中，Instagram图标没有对齐黑色圆圈内的中心，因此我对其进行了一些更改

由于Instagram图标是方形的，因此当

字体大小

为55px时，不应设置

宽度

40px

```

如果您对我的答案有更多问题，请随时与我联系：）

：根目录{
--褐红色：#85144b；
--紫红色：#f012be；
--紫色：#b10dc9；
--石灰：01ff70；
--黑色：#000000；
--白色：#ffffff；
--蓝色：#89cff0；
}
@字体{
字体系列：“奶昔”；
src:url（字体/Milkshake.ttf）；
字体风格：普通；
字号：100；
}
@字体{
字体系列：“安布尔”；
src:url（字体/Amble-Regular.ttf）；
字体风格：普通；
字号：100；
}
html，
身体{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
/**/
.介绍{
身高：100%；
宽度：100%；
右边距：20px；
保证金：自动；
背景：url（“images/eye.jpg”）不重复50%50%；
显示：表格；
排名：0；
背景尺寸：封面；
不透明度：0.92；
}
.内部介绍{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
最大宽度：无；
}
.内容h1{
颜色：var（--黑色）；
字体大小：350%；
保证金：0px 0px；
文本对齐：居中；
文本转换：粗体；
字体系列：奶昔；
字号：100；
}
.集装箱{
显示器：flex；
柔性包装：包装；
溢出：隐藏；
证明内容：中心；
边缘顶部：50px；
}
.货柜a{
边界半径：9px；
颜色：var（--黑色）；
字体大小：135%；
填充：10px 20px；
文字装饰：无；
边框：实心变量（--黑色）5px；
文本转换：大写；
利润率：20px 40px；
字体系列：安布尔；
字号：150；
字体风格：粗体；
}
/*Instagram图标*/
法兰西{
填充：20px；
字体大小：55px；
宽度：55px；/*需要适合字体大小*/
文本对齐：居中；
文字装饰：无；
边界半径：50%；
对齐内容：居中对齐；
}
.fa:悬停{
不透明度：0.7；
}
.fa instagram{
背景：var（--黑色）；
颜色：var（--白色）；
}
.页脚{
位置：固定；
底部：0；
宽度：95px；
高度：100px；
左：50%；
左边距：计算（-95px/2）；
}


丽贝卡·伯明翰·马奎尔

.footer {
      position: fixed;
      bottom: 0;
      width: 95px; // here
      height: 100px;
      left: 50%; // here
      margin-left: calc(-95px / 2); // here
    }

.fa {
          padding: 20px;
          font-size: 55px;
          width: 55px; /* here */
          text-align: center;
          text-decoration: none;
          border-radius: 50%;
          align-content: center;
        }