web-dev-qa-db-ja.com

CSS：相対的な親の内側に絶対位置のテキストを中央揃え

絶対位置のテキストを流動的な相対親の中央に配置するにはどうすればよいですか？親要素でtext-align:centerを使用しようとしていますが、要素自体ではなく、常に子の左隅を中央に配置します。

http://jsfiddle.net/sucTG/2/

htmlcsscss-positioncentering
12
vlad

重要なのは、position:absolute;が要素の幅をその内容に合うように変更し、text-align: center;がテキストを要素ブロックの幅の中央に配置することです。したがって、position: absolute;を追加する場合は、要素の幅を増やすことを忘れないでください。そうしないと、text-align: center;プロパティが役に立たなくなります。

これを解決する最善の方法は、.textセクションにwidth: 100%;とleft: 0px;を追加することです。

http://jsfiddle.net/27van/

28
amaurymartiny

更新：私が前に置いたものは悪い/間違っていた

http://jsfiddle.net/brJky/1/

これはあなたが望むものにはるかに近いはずですか？

あなたのテキストは相対的であり、コンテナ内の他の要素は絶対的です！

.text {
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;
}

.absolute {
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;
}
0
Gary Kenyon

これで、フレックスを使用して、よりエレガントに必要なものを実現できます。次に例を参照してください。

HTML：

<div class="container">
  <div class="text">Your text</div>
</div>

CSS：

.container {
  position: relative; 
  width: 400px; /** optional **/
  height: 400px; /** optional **/
  background-color: red; /** optional **/
}

.text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
}
0
stray