最終更新日: 2021年2月19日

    span要素を中央寄せする方法をサンプルコード付きで紹介！

    span要素を中央寄せする方法をサンプルコード付きで解説します。span要素を中央寄せさせる方法には様々な方法があり、それぞれ使いどころが違ってきますので、今回紹介する方法はすべて押抑え、実際に使えるようにマスターしてください。

    コンテンツ [表示]

    1. 1span要素を中央寄せしたい
    2. 2span要素を中央寄せする方法
    3. 2.1positionプロパティを使う方法
    4. 2.2divタグで囲う方法
    5. 2.3displayプロパティを使う方法

    span要素を中央寄せしたい

    センタリング（中央寄せ）する方法として代表的なのはtext-align:center;だと思います。しかし、spanタグには使うことができません。

    今回は上記のサンプルコードのように、span要素をセンタリング方法を解説します。

    span要素を中央寄せする方法

    positionプロパティを使う方法

    まず紹介するのはpositionプロパティとtransformプロパティを使った方法です。

    以下のサンプルコードをご覧ください。

    positionプロパティ

    .container{
  position: relative;
}

.container span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

    まず親要素にposition:relative;を指定します。

    そして、absoluteに指定したspan要素をtopプロパティとleftプロパティで50%の位置に配置、その後transformプロパティで要素自体の大きさ分元に戻します。

    そうすることで、span要素を中央寄せすることができます。

    divタグで囲う方法

    次に紹介するのはdivタグで囲む方法です。

    div要素にはtext-align:center;が効くので中央寄せすることができます。

    divタグ

    <div>
  <span>span要素</span>
</div>

    displayプロパティを使う方法

    最後に紹介するのはdisplayプロパティでblockを指定する方法です。spanタグはinline要素なので、そのままではtext-alignプロパティが効きません。

    そこで、spanタグにdisplayプロパティでblockを指定することでtext-alignプロパティを効かせることができます。

     

    displayプロパティ

    span{
  display: block;
  text-align: center;
}
    GeekHive採用サイト

    関連記事