（CSS）見出しを中央寄せして、文字幅だけ下線を引くためのコード

Question

前提・実現したいこと

下記のように、見出し（h2）を
・画面の中央に寄せる
・文字幅と同じ幅の下線を引く
としたいです。

WebサイトはJimdoを利用しています。

発生している問題・エラーメッセージ

下記のコードをコピペして使いました。
下線は引けるのですが、中央寄せができませんでした。

h2 {
display: inline-block;
border-bottom: solid 4px #ffa500;
}

一方で、下記コードを記載の上、Jimdo内の文字寄せ機能を使うと、
中央寄せができるのですが、文字幅の下線が引けませんでした。

h2 { border-bottom: solid 4px #ffa500; }

なお、下記のサイトです。
https://www.konoyubi-hoiku.com/
「私たちの描く保育の未来」「私たちがやること」などの部分です。

この両方を実現する方法はないでしょうか？

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSSなど）を質問文に追記されたほうが回答を得やすいと思います。

[tsune20]

ありがとうございます。回答が不足しており失礼致しました。

下記については、こちらのコードを使いました。
その後、Jimdo内に「中央寄せ」の機能があり、クリックしました。
中央寄せになり下線は引けるのですが、下線の幅が文字の幅を超えてしまい、どうにかしたいです。

h2 {
border-bottom: solid 4px #ffa500;
}

＞一方で、Jimdo内の文字寄せ機能を使うと、
中央寄せができるのですが、文字幅の下線が引けませんでした。

[kei344]

HTMLは周りの要素やその指定の影響を受けることがあるので、一部を載せても情況が再現しません。公開されているサイトなのであれば、そのURLを提示するのも手段です。

[tsune20]

ありがとうございます。

下記のサイトです。
https://www.konoyubi-hoiku.com/

「私たちの描く保育の未来」「私たちがやること」などの部分です。

よろしくお願い致します。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

[tsune20]

ありがとうございます。
本文に追記致しました。

Answer 1

h2の親要素にtext-align: center;を指定すると文字が中央寄せにできると思います。

---

追記してもらったURLを見たところ、該当の箇所のHTMLは以下のようです。

<div id="cc-m-10442113870" class="j-module n j-header">
  <h2 class="" id="cc-m-header-10442113870">私たちが描く保育の未来</h2>
</div>

以下のようにh2の親要素にtext-align: center;をします。

汎用的な記述をするなら、例えば以下

.j-header {
  text-align: center;
}

範囲を限定するなら以下

#cc-m-10442113870 {
  text-align: center;
}

Comments

[tsune20]

ご回答ありがとうございます。

ヘッダーを下記のように書き換えてみたのですが、中央寄りになりませんでした。
下記の書き方で、合っていますでしょうか？

h2 {
text-align: center;
display: inline-block;
border-bottom: solid 4px #ffa500;
}

[kei344]

To: tsune20さん
「h2の親要素に」指定する必要があります。
#content_area .j-header {
text-align: center;
}

[tsune20]

To：kei344さん
ありがとうございます。

ページ全体のCSSに、追加してみました。
しかし、中央寄せにはなるのですが、下線が消えてしまいました。

なお、下記のように追記しています。

/* Typo
----------------------------------------------- */

a:link, a:visited
{
text-decoration: underline;
color:#EC4413;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }

h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p { font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/* Layout
----------------------------------------------- */

body {
background: #333333 url(bg.gif) no-repeat top left;
padding:35px 0 0 0;
margin:0;
font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
margin:0 auto;
width:834px;
background:white;
}

#content_area .j-header
{
text-align: center;
}

#header
{
padding:17px;
}

#header h1,
#header a
{
padding:0;
font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:30px;
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color:#666666;
text-align:right;
}

#header a:hover { text-decoration:none; }

#navigation
{
float:left;
width:220px;
padding:17px;

}
#sidebar
{
padding-top:10px;
}

#content
{
float:right;

width:530px;
padding:17px;

}

#footer
{
clear:both;
margin-top:10px;
background:url(footer-bg.gif) repeat-x top;
height:65px;
}

#footer .gutter
{
height:30px;
padding:35px 15px 0 90px;
}

/* Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
margin:0;
padding: 0;
}

ul.mainNav1 li,
ul.mainNav2 li
{
display: inline;
margin: 0;
padding: 0;
}

ul.mainNav1 li a,
ul.mainNav2 li a
{
font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color:#333;
border-bottom:1px solid #CCC;
}

ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }

ul.mainNav1 a:hover
{
background:#EEE;
color:black;
}

ul.mainNav1 a.current { font-weight:bold; }

[kei344]

To: tsune20さん
h2の指定をしていないだけでは。

[tsune20]

To:kei344さん
ありがとうございます。
全ページのヘッダーに、下記を加えてみましたが、下線がでませんでした。。

h2 {
　display: inline-block;
　border-bottom: solid 4px #ffa500;
}

[tsune20]

To:kei344さん
できました！！
親要素を入れる位置を間違えていたようで、下記のように該当ページのヘッダーを記載したところ、できました。
ご丁寧に教えていただき、ありがとうございます！

#content_area .j-header {
text-align: center;
}

h2 {
display: inline-block;
border-bottom:3px solid #ffa500;
padding:0.1em;
}