修复 css 中页眉/页脚部分的文本对齐答案

【问题标题】：Fix text-align in css for sections of header/footer修复 css 中页眉/页脚部分的文本对齐
【发布时间】：2016-03-04 08:14:45
【问题描述】：

我开始了一个新的 Web 应用程序项目，其中有一个这样的 html 代码：

html：

<footer>
    <section class="left">
        <h1>Copyright</h1>
        <span> Kleber Mota de Oliveira</span>
    </section>

    <section class="right">
        <h1>website</h1>
        <a href="http://klebermota.eti.br"> klebermota.eti.br</a>
    </section>
</footer>

css：

section {
  display: inline;
}

.right {
  position: absolute;
  right: 5px;
  width: 50%;
  text-align: right;
}

.left {
  position: absolute;
  left: 5px;
  width: 50%;
  text-align: left;
}

完整代码：http://jsfiddle.net/klebermo/ee2nx7vc/

每个部分都放置在屏幕的一侧；但右侧的文字正在被修剪。在标题中，文本没有按应在右侧对齐。

任何人都可以提示如何解决这个问题？

【问题讨论】：

添加一些填充可能吗？
您将标题中<ul> 中的文本居中，这就是它右对齐的原因。就页脚而言，您在推动事物的主体元素上有一个边距。删除它。

标签： html css margin text-align

【解决方案1】：

section {
    display: inline;
    height: 100%;
}

header section ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Sigmar One",cursive;
    display: inline;
    padding: 0;
    margin: 0;
    height: 100%;
    line-height: 2;
}

【讨论】：

【解决方案2】：

设置正确的line-height 将起作用。现在我使用以下方法重置它：

* {line-height: 1;}

而且显示效果很好：

小提琴：http://output.jsbin.com/qezuzanajo

【讨论】：

【解决方案3】：

尝试改变你的 CSS

.right{
position:fixed; right: 7px;`}

和

.left{position:fixed; left: 7px;}

在 jsfiddle 上它似乎正在工作 ;)

【讨论】：