【CSS】text-alignの使い方を分かりやすく解説！効かない時の原因と対処法も紹介

<div class="parent center">
  <span> text-align: center;でテキストを真ん中にします。</span>
</div>
<div class="parent left">
  <span>text-align: left;でテキストを左寄せにします。</span>
</div>
<div class="parent right">
  <span>text-align: right;でテキストを右寄せにします。</span>
</div> 

.parent {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
  width: 80%;
  height: 300px;
  font-size: 30px;
}
.center {
  text-align: center;/*テキストを真ん中寄せに*/
}
.left {
  text-align: left;/*テキストを左寄せに*/
}
.right {
 text-align: right;/*テキストを右寄せに*/
}

<p class="center">text-align: center; でテキストを真ん中にします。</p>
<p class="left">text-align: left;でテキストを左寄せします。</p>
<p class="right">text-align: right;でテキストを右寄せします。</p>

p {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
  width: 80%;
  height: 300px;
  font-size: 30px;
}
.center {
  text-align: center;/*テキストを真ん中寄せに*/
}
.left {
  text-align: left;/*テキストを左寄せに*/
}
.right {
  text-align: right;/*テキストを右寄せに*/
}

<span class="right">text-align: right;をspanタグに指定します。</span>

span{
  border: 1px solid #ccc;
  width: 80%;
  font-size: 30px;
}
.right {
  text-align: right;
}

<span class="right">text-align: right;をspanタグに指定します。</span>

span{
  border: 1px solid #ccc;
  width: 80%;
  font-size: 30px;
}
  .right {
  text-align: right;/*テキストを右寄せに*/
  display: block;/*追加*/
}

<div class="center">
  <img src="./img/kikyu.jpg" alt="中央揃えの画像">
  <p>この画像は中央揃えです。</p>
</div>
<div class="left">
  <img src="./img/kikyu.jpg" alt="左揃えの画像">
  <p>この画像は左揃えです。</p>
</div>
<div class="right">
  <img src="./img/kikyu.jpg" alt="右揃えの画像">
  <p>この画像は右揃えです。</p>
</div>

.center {
  text-align: center; 
  margin: 20px 0;
}
.left {
  text-align: left;
  margin: 20px 0;
}
.right {
  text-align: right;
  margin: 20px 0;
}
img{
  width: 20%;
}

<div class="center">
  <p>この表は中央揃えです。</p>
  <table>
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
    <tr>
      <td>中央揃え</td>
      <td>データ1</td>
    </tr>
  </table>
</div>
<div class="left">
  <p>この表は左揃えです。</p>
  <table>
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
    <tr>
      <td>左揃え</td>
      <td>データ2</td>
    </tr>
  </table>
</div>
<div class="right">
  <p>この表は右揃えです。</p>
  <table>
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
    <tr>
      <td>右揃え</td>
      <td>データ3</td>
    </tr>
  </table>
</div>

table {
  border-collapse: collapse;
  width: 80%; /* テーブルの幅を指定 */
  height: 150px;
  border: 1px solid #ccc;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}
.center {
  text-align: center; /* 親要素でテーブルを中央揃え */
}
.left {
  text-align: left; /* 親要素でテーブルを左揃え */
}
.right {
  text-align: right; /* 親要素でテーブルを右揃え */
}
p{
  text-align: left;
  font-size: 24px;
  font-weight: bold;
}

<span class="right">text-align: right;をspanタグに指定します。</span>

span{
  border: 1px solid #ccc;
  width: 80%;
}
.right {
  text-align: right;
}

<div class="right">
  <span>text-align: right;をspanタグに指定します。</span>
</div> 

.right {
  text-align: right;
  border: 1px solid #ccc;
  width: 80%;
  font-size: 30px;
}

<span class="right">text-align: right;をspanタグに指定します。</span>

span{
  border: 1px solid #ccc;
  width: 80%;
}
.right {
  text-align: right;/*テキストを右寄せに*/
  display: block;/*追加*/
}

<img src="./img/kikyu.jpg" alt="中央揃えの画像" class="center">

.center {
  text-align: center;
  margin: 20px 0;
}
img{
  width: 20%;
}

<img src="./img/kikyu.jpg" alt="中央揃えの画像" class="center">

.center {
  text-align: center;
  display: block;
  margin: 20px 0;
}

<div class="center">
  <img src="./img/kikyu.jpg" alt="中央揃えの画像" >
</div>

.center {
  text-align: center;
  margin: 20px 0;
}

<img src="./img/kikyu.jpg" alt="気球の画像（真ん中寄せ）" class="center">
<img src="./img/sky-diving.jpg" alt="スカイダイビングの画像（右寄せ）" class="right" >

img{
  width: 20%;/*widthを忘れず指定*/
  display: block;
}
.center {
  margin: 0 auto;/*真ん中寄せ*/
}
.right{
  margin-left: auto;/*右寄せ*/
}

<div>
  <p>ZeroPlus Gate（ゼロプラスゲート）は、
  無料で30日間、HTML/CSSを基礎からガッチリ学べるプログラミングスクールです。
  60本の動画教材を通じて、正しいコーディングを身につけられます。
  分からないことがあれば、回数無制限でプロのエンジニアに質問できるため、
  初めてHTML\CSSを学ぶ人でも安心です。またZeroPlus Gate最大の特徴として、
  一人ひとりに専任のメンターが付きます。独学では何をどのように学んでよいか
  迷ってしまいがちですが、メンターが正しい学習方法を示してくれるため、
  Webサイトの作り方をしっかり学び切れますよ。ZeroPlus Gateは
  毎月先着制になっているため、受講は早い者勝ちです！
  お申し込みはお早めに。</p>
</div>

div{
  border: 1px solid #ccc;
  font-size: 24px;
}

div{
  border: 1px solid #ccc;
  width:40%;
  font-size: 24px;
  text-align: justify;/*追加*/
}

div{
  border: 1px solid #ccc;
  width:30%;
  font-size: 24px;
  text-align: justify;
  word-break: break-all;/*追加*/
}

<div class="parent center">
  <span>text-align: center;でテキストを真ん中にします。</span>
</div>
<div class="parent left">
  <span>text-align: left;でテキストを左寄せにします。</span>
</div>
<div class="parent right">
  <span>text-align: right;でテキストを右寄せにします。</span>
</div> 

.parent {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
  width: 80%;
  height: 300px;
  font-size: 30px;
}
.center {
  text-align: center;/*テキストを真ん中寄せに*/
}
.left {
  text-align: left;/*テキストを左寄せに*/
}
.right {
  text-align: right;/*テキストを右寄せに*/
}