セレクトボックスのテキストを中央揃えにする【jQuery】

jQueryを使用することで、セレクトボックスのテキストを中央揃えに簡単にできるのでメモ的に残します。

jQueryを使ったセレクトボックスの中央揃え方法

セレクトボックスのテキストを中央揃えにするためにjQueryを使用するので、HTMLファイルにjQueryライブラリを読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

セレクトボックスのIDを指定する

jQueryを使って、セレクトボックスのテキストを中央揃えするには、まず対象のセレクトボックスにIDを設定します。

<select id="centered-select">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

 

jQueryコードを記述する

次に、先ほど設定したIDを使って、jQueryコードを記述します。以下のコードは、セレクトボックスのテキストを中央揃えにする方法です。

$(document).ready(function() {
  $('#centered-select').css('text-align', 'center');
});

 

上記のコードでは、text-alignプロパティをcenterに設定することで、セレクトボックスのテキストが中央揃えされます。

まとめ

jQueryを使用して、簡単なコードを追加するだけで、セレクトボックスのテキストを中央揃えにできました。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...