インラインブロックテキストがセンタリングされていません

このボックスがあり、インラインブロックテキストエレメントが3つあります。左と右のテキストは機能していますが、中央のテキストは正しく中央揃えされていません。 View here インラインブロックテキストがセンタリングされていません

HTML：

<body> 

     <div class="container-fluid text-center" id="banner"> 

       <p class="text-left inline-block shordy" id="inline1">We're On Your Side...</p> 
       <span class="text-center" id="hero" style="text-align: center;">Welcome To Property Snagging Direct...</span> 
       <p class="inline-block text-right shordy" id="inline3"><i>Your Independent, Specialist Property Inspectors</i></p> 

     </div><!-- text-center --> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

</body>

CSS：

div.row #banner{ 
      padding-top: 0; 
      margin-bottom: 0.8em; 
      background-color: #FF9935; 
      border: 1px solid #ccc; 
      color: #000; 
     } 

     div.row #banner p{ 
      margin-bottom: 0; 
     } 

     div.row #banner .shordy{ 
      font-family: lato, serif; 
      font-size: 1.1em; 
      font-weight: 900; 
      margin-top: 0.5em; 
      line-height: 1.1em; 
     } 

     div.row #banner #hero{ 
      font-family: lato, serif; 
      font-size: 1.3em; 
      font-weight: 900; 
     } 

     .inline-block{ 
      display: inline-block; 
     } 

     #inline1{ 
      float: left; 
     } 

     #inline3{ 
      float: right; 
     } 

     .banner{ 
      display: inline-block; 
     }

あなたは私が話しているかを見ることができますので、結果ボックスを拡張してください。

*これは、「プロパティひっかかり直接へようこそ...」です*

出典

2017-11-20 Gulnoor

はかなり私には中央に見えます。ブラウザの問題？ – anomaaly

私はChromeを使用しています – Gulnoor

@anomaaly mayby彼は他のテキストの幅に関係なく、 –

を中心としていないことをあなたは、その内容を中心にしたい場合は、その親の100％幅にあなたのスパンを設定する必要があります。現時点では、スパンはテキスト自体の幅にすぎません。したがって、実際の親に中心を置く方法はありません。

ちょうどあなたが、あなたのヒーロースパンにインラインブロックを追加したい場合があります

span{ 
    width:100%; 
}

出典

2017-11-20 22:58:01 Korgrue

回答ありがとうございますが、他の誰か（@anomaaly）がスパンをインラインで維持しながら解決しました – Gulnoor

あなたの決断がうれしいです。乾杯！ – Korgrue

のようなものを追加します。

#hero { 
    display: inline-block; 
} 
.three { 
    width: 33.33%; 
    background-color: gray; 
    border: 1px solid #000;

ここフィドル：https://jsfiddle.net/cagvhpe5/2/ あなたが拡大してあなたが幅の変化を見ることができるので、私は唯一の背景色や枠線を追加しました。それ以外の場合は、テーブル表示を使用することもできます。

出典

2017-11-20 23:06:03 anomaaly

2つのフローティング要素の間の空きスペースの中央に配置されているため、右側のテキストを短くすると分かります。

https://jsfiddle.net/ovv1utt4/1/

これを避けるために、あなたはこのCSSでその要素をセンタリングすることができます

#hero { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    }

https://jsfiddle.net/9onnmhtu/1/

出典

2017-11-20 23:22:09 Johannes

インラインブロックテキストがセンタリングされていません

答えて

関連する問題