CSS Anzeige Eigenschaft Abbrechen Text-Align

Ich habe ein Problem mit Ausrichtungen hier. Ich habe jQuery ein Feld für mich bevölkern. Ich möchte das Grad-Symbol hinzufügen, das ich mit einer HTML-Entität gemacht habe. Aus irgendeinem Grund, wenn ich beide Elemente die Anzeige geben: Inline-Eigenschaft der Text-align: center; Eigenschaft wird ignoriert. Kann jemand erklären, warum und wie zu beheben? Hier ist der Code in Frage ...CSS Anzeige Eigenschaft Abbrechen Text-Align

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; 
}

Quelle

2017-02-01 RhinoTekMN

Wenn Sie 'display: inline' einstellen, ist die Breite von' .curr-temp' * nur so breit wie der Inhalt *, so dass die Ausrichtung meistens irrelevant ist. Warum stellen Sie es auf "Inline" ein? Wo willst du es sehen? –

Versuchen Sie 'display: inline-block' statt – cyrix

@cyrix - das wird nichts lösen, Inline-Block wird nur so breit sein wie der Inhalt darin auch. –

Denn wenn man display:inline gesetzt, die Breite von .curr-temp ist nur so breit wie die Inhalte in ihrem, so Ausrichtung wird meist irrelevant. Und da Sie beide Elemente auf h1 eingestellt haben, ersetzen Sie den Standard h1 default display: block;.

Wenn Sie wollen, dass sie zentriert und innerhalb eines h1, ändern Sie die Markup wie folgt:

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>

Diese wickelt beide Elemente in Ihrem gewünschten h1, die die text-align: center; bewahren, aber gibt Ihnen immer noch das Markup id und class erforderlich, um Ihre Änderungen über jQuery vorzunehmen.

Quelle

2017-02-01 22:10:59

Sie beide von zwei H1-Tag innerhalb von Tags Wickeln kann.

Wenn Sie die Eigenschaft "inline" für h1 oder andere Kopf-Tags festlegen, haben sie keine 100% Breite des Wrappers. Couse davon wird nicht zentriert sein.

Quelle

2017-02-01 22:10:07 Performer

CSS Anzeige Eigenschaft Abbrechen Text-Align

Antwort

Verwandte Themen