bootstrapで文字を移動できない

Question

bootstrapで文字を中央にしたいと思ったのですが、うまくいきません。コード載せるので、改善点を教えてください。文字制限をオーバーしてしまうので、一部抜粋します。

<span class="align-top"><b>ホスティングの詳細はこちら</b></span>
コード

追記：こうしたいです。

Comments

[m.ts10806]

align-topはその名の通り「中央」ではないはずですが、どうなったらゴールなのでしょう

[writegrint]

追記しました。確認お願いします。

Answer 1

「こうしたいです。」の画像だと以下のような形です。

<div class="container">
  <p><span class="align-top"><b>ホスティングの詳細はこちら</b></span></p>
</div>

文字を画面に対して中央揃えしたいのであれば以下です。<span>とclass="align-top"は不要と思われますが、元のソースに倣い消さずにいます。

<div class="container">
  <p class="text-center"><span class="align-top"><b>ホスティングの詳細はこちら</b></span></p>
</div>

Answer 2

テキストの中央寄せなら、クラスに text-center を追加すればいいでしょう。

文字の左寄せ/右寄せ/中央揃え

ただ、画像を見ると単純な中央寄せではなく、上のブロックと左端を揃えるのがご希望のレイアウトのようです。

だとしたら、上のブロックも含むHTMLを提示してもらう必要があります。

---

コメントのHTMLを修正するなら、

<div class="container">
  <div class="flex1_div row">
    <div class="first_div col-6">
      <button type="button" class="btn btn-link mt-1">体験ホスティングの詳細はこちら</button>
      <button type="button" class="btn btn-link mt-1">予約前にゲストに求められる要件は？</button>
      <button type="button" class="btn btn-link mt-1">お部屋の掲載料はいくら？</button>
    </div>
    <div class="second_div col-6">
      <button type="button" class="btn btn-link mt-1">家財破損があった場合、どのような補償がありますか？</button>
      <button type="button" class="btn btn-link mt-1">リスティングの料金を選ぶには？</button>
      <button type="button" class="btn btn-link mt-1">料金設定の支援ツールはありますか？</button>
    </div>
  </div>
  <p class="px-3 mt-3"><span><b>ホスティングの詳細はこちら</b></span></p>
</div>

Comments

[writegrint]

<div class="flex1_div">
<div class="first_div">
<button type="button" class="btn btn-link mt-1">体験ホスティングの詳細はこちら</button>
<button type="button" class="btn btn-link mt-1">予約前にゲストに求められる要件は？</button>
<button type="button" class="btn btn-link mt-1">お部屋の掲載料はいくら？</button>
</div>
<div class="second_div">
<button type="button" class="btn btn-link mt-1">家財破損があった場合、どのような補償がありますか？</button>
<button type="button" class="btn btn-link mt-1">リスティングの料金を選ぶには？</button>
<button type="button" class="btn btn-link mt-1">料金設定の支援ツールはありますか？</button>
</div>
</div>
<div class="container">
<p><span class="align-top"><b>ホスティングの詳細はこちら</b></span></p>
</div>

[writegrint]

コメントに書きました。