親要素に対して、文字を左右を中央に揃えたいのですが、少し右に寄ってしまいます。

Question

親要素(<div class="footer-back">)に対して、子要素の文字(<span class="saigo">&copy 2022 by LittlePeople. All Rights Reserved.</span>)を左右を中央に揃えたいのですが、少し右に寄ってしまいます。何故でしょうか？教えていただきたいです。お願いします。

footer.php

<div class="footer-back">
    <hr class="line-1">

    <span class="saigo">&copy 2022 by LittlePeople. All Rights Reserved.</span>
    <hr class="line-2">
</div>

style.css

    height: 100px;
    background-color: rgb(0, 0, 0);
    position: relative;
}

.saigo {
    /*footer 文字　*/
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 13px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100px;
    color: rgb(255, 255, 255);
    white-space: nowrap/*改行させたくない*/
    ;
    font-family: 'Arimo', sans-serif;
}

Answer 1

saigoの横幅が100pxに設定されていますのでその要素を中央に設置されていますが
テキストが100pxを超えているために要素からはみ出しています。
widthを適切な値にするかautoにしましょう。

Comments

[wyook]

なるほど！！何故そうなるのかわからなかったので、教えて頂きありがとうございます！！
感謝です。

Answer 2

width: 100px;があるからだと思いますよ。

Comments

[recal]

テストしてみました
https://codepen.io/recal/pen/WNZLNGQ

- width:100pxをコメントアウトしたパターンと
- display:flexで上下左右中央揃えしたパターン(hrの指定が共有されてなかったのでhr抜き)

[wyook]

ありがとうございます！！解決いたしました！！