CSS表示プロパティキャンセルテキスト整列

Question

ここでは整列に問題があります。私はフィールドをjQueryに埋め込んでいます。私は、HTMLエンティティで度の記号を追加したいと思います。何らかの理由で、両方のアイテムにdisplay：inlineプロパティを指定すると、text-align：center;プロパティは無視されます。なぜ誰かが修正する方法を説明することはできますか？ここで問題のコード...あなたがタグの内側に2つのH1タグの両方をラップすることができます

HTML

<h1 class="curr-temp" id="farh"></h1><h1 class="curr-temp">&deg</h1> 
<button id="switch">F/C</button> 

CSS

.curr-temp { 
    display:inline; 
    text-align:center; 
} 

Answer 1

あなたがdisplay:inlineを設定すると、.curr-tempの幅はそれ内の内容としてのみなど広いなので、アライメントはほとんど無関係になりますので。これらの要素の両方がh1に設定されているため、標準h1のデフォルト値をdisplay: block;に置き換えます。

あなたがそれらを中心とh1の内側にしたい場合は、そのようなマークアップを変更します。これはtext-align: center;が保持されます、ご希望のh1内の要素の両方をラップ

h1 { 
 
    text-align: center; 
 
}

<h1><span class="curr-temp" id="farh">5</span><span class="curr-temp">&deg</span></h1> 
 
    <button id="switch">F/C</button>

が、 jQueryを使って変更を加えるには、マークアップidとclassが必要です。

Answer 2

です。

h1または他のヘッドタグに「インライン」プロパティを設定すると、ラッパーの幅は100％になりません。これの心は中心に置かれません。