我目前正在设计一个网站，网站页脚有问题。
在桌面上查看时，页脚如下所示：在桌面上查看的网站页脚
用于创建此外观的代码是：
<meta name="color:Footer Background Color" content="#000000">CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
<a href="/" style="font-size:1.4rem">Home</a>
<a href="/about" style="font-size:1.4rem">About</a>
<a href="/news" style="font-size:1.4rem">News</a>
<a href="/musings" style="font-size:1.4rem">Musings</a>
<a href="/music" style="font-size:1.4rem">Music</a>
<a href="/media" style="font-size:1.4rem">Media</a>
<a href="/shows" style="font-size:1.4rem">Shows</a>
<a href="/store" style="font-size:1.4rem">Store</a>
<a href="/contact" style="font-size:1.4rem">Contact</a>
<a href="/ask" style="font-size:1.4rem">Ask</a>
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>现在的问题是，当(例如)窗口的宽度减少时，页脚元素似乎分散了，.create元素从页脚中出来，并在下面。
我想做的(当在小窗口宽度或移动设备屏幕上查看网站时)是按以下顺序"居中"one_answers"堆叠"页脚元素(.footer消息、.footer返回顶部和.create)：顶部：.footer回到顶部、中间：.footter消息和底部：.create，页脚背景色仍然#ffffff。一个小的照片编辑可以代表我的意思：移动设备或小型桌面窗口宽度上的理想网站页脚外观
我希望有人能帮助我。非常感谢。
介绍媒体查询
为了实现您想要的内容，您可以在CSS中使用媒体查询。
例如，如果您希望以480px或更小的屏幕宽度堆叠页脚元素，则以下媒体查询将允许您仅针对该场景进行样式设置：
@media (max-width: 480px) {
// Styles here
}
考虑到这一点，让我们进入堆叠的要点。当前要堆叠的元素上有不同的位置属性。将元素堆叠在一起的最简单方法是使用属性display: block;和float: left;。这样，元素将跨越其容器的宽度，并按照它们在文档HTML中的顺序出现。
让我们来看看你可能会怎么做：
@media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
注意，我只是删除了其他属性，因为它们已经应用于所有屏幕大小。您可能需要更改此媒体查询中的样式，以防新样式影响其布局，或者您希望移动设备的布局有所不同。
希望能有所帮助！
更新：我刚刚注意到你想集中元素的部分，我在上面添加了一些代码