Center-Ausrichtung <p> in <div>
Habe ich Folgendes CSS:
#slot {
width: 70px;
height: 25px;
line-height: 25px;
border: 2px solid black;
background-color: #00ffee;
padding: 1px;
overflow: hidden;
}
#element {
text-align: center;
}
Und HTML:
<div id="slot">
<p id="element">100 </p>
</div>
Möchte ich die <div>
zu sein, von fester Größe, und die Zahl, die in <p>
(nur zahlen eingefügt werden sollen, gibt), ich möchte Sie haben zentriert rechts in die Mitte ohne änderung der Größe der größeren <div>
.
Ich bereits den height
des div, was ich haben will, aber mit line-height
hat einen Vorteil und einen Nachteil. Der Vorteil ist, dass die Reihe endlich erscheint zentriert rechts in der Mitte. Der Nachteil ist, dass, wenn ich entfernen Sie die Nummer (es ist ein leerer <p>
), die <div>
's Höhe schrumpft.
Wie kann ich mein Ziel erreichen?
BEARBEITEN:
Ich verwendet, min-height und, dass das Problem behoben wurde. Mein Problem ist jetzt, dass der Inhalt des div-erscheint nicht in der Mitte und ist geschnitten wie diese:
Warum ist das passiert? Das ist sehr komisch, weil jsfiddle zeigt es korrekt an.
Geschieht auf allen Browsern.
- Haben Sie versucht, um text-align: center; in #slot?
- scheint zu funktionieren, in chrome? jsfiddle.net/rhoenig/qXvag sind Sie nur sehe das Problem in einem bestimmten browser?
- Funktioniert hier (FF 11, Ubuntu): jsfiddle.net/AHxRC
- In welchem browser die "Höhe schrumpft"? Weil ich habe das getestet und funktioniert das gleiche mit und ohne Wert für
p
für chrome 17,firefox 10,ie 7,8,9 - versuchen Sie, die div ein min-height, das zu beheben es verkleinern, wenn der Inhalt entfernt wird.
- Passiert mit allen Browsern.
- Das Bild, das Sie zeigen, sieht aus wie mein Browser immer Tat, wenn ich erlaubte Ihnen, fügen Sie Ihre Standard-Margen zu p ist. Set #Elements margin auf 0 setzen erste.
- Funktioniert! warum ist das geschehen? Warum war es im jsfiddle?
- Liebe siehe meine Antwort und lassen Sie mich wissen, wenn Probleme nicht behoben, so kann ich auf Ihre Frage.
- Finden Sie die Geige für die demo und wenn Sie entfernen Sie den Wert div wird nicht schrumpfen.
- Nayefc: warum klappte es in jsfiddle: wahrscheinlich, weil jsfiddle ist kein browser und nicht über eine default-stylesheet? Ich glaube, Geige ist am besten als eine Art paste-bin und nie für die tatsächliche Prüfung.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Finden Sie die Geige für die demo und wenn Sie entfernen Sie den Wert div wird nicht schrumpfen.
Fiddle: http://jsfiddle.net/RFN2h/
Demo: http://jsfiddle.net/RFN2h/embedded/result/
Wenn CSS funktioniert auf JS-Fiddle und funktioniert nicht in Browsern, die Sie wahrscheinlich haben andere CSS vom browser standardmäßig oder auf Ihre Seite, die ist behindert, die CSS, die Sie geschrieben. Sie konnte herausfinden, was CSS wird überschrieben. Dies kann leicht getan werden mit Firebug oder Chrome-Web-Entwickler. (CSS überschrieben ist Durchgestrichen).
Wahrscheinlich, der browser ist imposant Standard-Polstern oder Margen für die Absätze. Sie könnten reset alle browser CSS mit einer der Taktiken, die auf dieser Seite aufgelistet. http://www.cssreset.com/