Html 如何使页脚响应并使页脚上的文本水平对齐？_Html_Css

Html 如何使页脚响应并使页脚上的文本水平对齐？

html css

Html 如何使页脚响应并使页脚上的文本水平对齐？,html,css,Html,Css,我正在做一个项目，但我似乎找不到一种方法可以让我的页脚居中并做出响应。这是我的html代码 #页脚{ 位置：绝对位置；左：0；底部：0；宽度：100%；高度：2.5雷姆；背景色：黑色；边框顶部：4px实心#F2D380！重要； } .socialIcon{//更新宽度：20px； } ``` //更新 ```请参见下面的代码。您可以忘记在“div”中包装每个锚点。简单地将它们分组到父DIV中，然后以它们为目标，会容易得多。这应该是可行的，你可以有更多的灵活性。此外，不必担心f

我正在做一个项目，但我似乎找不到一种方法可以让我的页脚居中并做出响应。这是我的html代码

#页脚{
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
高度：2.5雷姆；
背景色：黑色；
边框顶部：4px实心#F2D380！重要；
}
.socialIcon{//更新
宽度：20px；
}


```
//更新
```

请参见下面的代码。您可以忘记在“div”中包装每个锚点。简单地将它们分组到父DIV中，然后以它们为目标，会容易得多。这应该是可行的，你可以有更多的灵活性。此外，不必担心flexbox或任何外部库

<style>
body{
  height:2000px; /* for demonstration purposes*/
}

/* position the footer div RELATIVE and give it a "top" property of 100% so it always sits at the bottom regardless of your window height*/
#footer {
  position: relative;
  top:100%;
  width: 100%;
  height: 2.5rem;
  background-color: black;
  border-top: 4px solid #F2D380 !important;
}
 /* center all items INSIDE the link_list DIV*/
.link_list{
  text-align:center;
}
/* target all the ANCHOR tags as inline elements*/
.link_list a {
    margin:50% 20px;
    color:white;
    text-decoration:none;
    text-align: center;
    flex: 0 0 16.666667%;
  }
</style>
<body>
<div id="footer">
  <div class="col-lg-2 link_list">
    <a href="#"> Company  Information </a>
    <a href="#" > Privacy Policy and User Agreement </a>
    <a href="about.html"> About </a>
    <a href="#" >©2019 Copyright claim</a>
  </div>
</div>
</body>


身体{
高度：2000px；/*用于演示*/
}
/*将页脚div置于相对位置，并将其设置为100%的“top”属性，使其始终位于底部，而与窗口高度无关*/
#页脚{
位置：相对位置；
最高：100%；
宽度：100%；
高度：2.5雷姆；
背景色：黑色；
边框顶部：4px实心#F2D380！重要；
}
/*将链接列表DIV内的所有项目居中*/
.link_列表{
文本对齐：居中；
}
/*将所有定位标记作为内联元素*/
.link_列表a{
利润率：50%20px；
颜色：白色；
文字装饰：无；
文本对齐：居中；
弹性：016.666667%；
}

添加

显示：flex到#页脚
，它会获得一些响应
quick fiddle=>
我已经编辑了你的代码。我在评论栏中解释了我所做的更改。我移走了展示台。你不需要这个密码
Html:
 <div id="footer">
        <div class="row text-center"> // I added row here, and I've got all the columns in a row, because all columns must be in a row. I added a "text center" class to keep all the text in the middle.
            <div class="col-sm-6 pb-sm-2  col-lg-3"> // that's how I arranged your columns . So they will adjust their width for each width value
                <a href="#"> Company Information </a>
            </div>
            <div class="col-sm-6 col-lg-3">
                <a href="#"> Privacy Policy and User Agreement </a>
            </div>
            <div class="col-sm-6 pb-sm-2  col-lg-3"> // "pb-sm-2" class to add padding bottom when dimensions are sm
                <a href="about.html"> About </a>
            </div>
            <div class="col-sm-6  col-lg-3">
                <a href="#">
                    ©2019 Copyright claim
                </a>
            </div>
        </div>
    </div>

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* height: 2.5rem; */ you can use padding this way instead of specifying height. if you give a single height value, you will need to set height separately for all dimensions.
    padding: 20px;
    background-color: black;
    border-top: 4px solid #F2D380 !important;
}

我希望我能帮忙。祝你好运
请在这里给我一把工作小提琴，这样我就可以调试了。非常感谢您的帮助，它工作了！如果我想添加社交媒体图标，我可以像上面那样做，对吗？欢迎。你用的是螺栓带。如果你指定图标作为冒号系统的位置和空间大小，你就可以这样做。是的，我做到了，谢谢。现在我在我的firefox下面有一个滚动条，因为我的页面右侧有额外的空间，很明显你只是在学习冒号系统。引导文档页面，我推荐更详细的网格系统搜索。你也可以为你的新问题打开一个新的帖子，但是首先试着自己解决它，这会对你更有用。