Question

我正在做一个学校项目，我需要将页脚内的文本与页面的右侧对齐。

我尝试过使用文本对齐方式，将整个内容变成一个flexbox，然后对齐，但这只是行不通。这是我的CSS：

footer {
position: fixed;
z-index: 100;
bottom: 2%;
text-align: right;
}

有人对发生的事情有所了解吗？预先感谢

编辑：有人要html，所以这里是：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="/mystyle.css">
  <title>MyPage</title>
</head>
<body>
  <iframe></iframe>
  <footer>MyName 2019</footer>
</body>
</html>

Answer 1

.footer {
    width:100%;
    position:fixed;
    background-color: red;
    z-index: 100;
    left: 0%;
    bottom: 2%;
    display: flex;
    justify-content: flex-end;
    /* text-align: right; */
}

这里是演示：https://stackblitz.com/edit/angular-wuf4qg

Answer 2

这是一个简单的例子：

.fixed {
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
}
.elements {
   position: absolute;
   right: 0;
   bottom: 0;
}

<div class="fixed">
  <div class="elements">
    <p>Centered Elements</p>
  </div>
</div>

这是现场演示：https://jsfiddle.net/Devel0per95/67rjmvw3/9/

如何在固定元素内对齐文本？

2 个答案: