zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden text-align: center

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.03.2013, 20:04
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard text-align: center

Hallo,
ich habe ein <li>-element das 100% Breite hat,
wie auch das <ul>-element und das umschliessende <div>.

In dem <li> ist ein Bild mit 100% Höhe und "width:auto" - das möchte ich nun mittig anzeigen lassen.
"text-align" funktioniert hier nicht.

Wie kriege ich das mittig?
Wann funktioniert text-align, wann nicht?
Ist es inzwischen "depreceated" oder kann man es noch benutzen?
margin:0 auto; geht nur, wenn, das Bild eine definierte Breite hat oder?

Vielen Dank für einen Hinweis!
Irmen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.03.2013, 21:58
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ein Link zur Problemseite wäre hier nützlich.

Wann funktioniert text-align:

Text-align funktioniert bei Textelementen, bei diesen hier:
a, em, strong, small, mark, abbr, dfn, i, b, s, u, code, var, samp, kbd, sup, sub, q, cite, span, bdo, bdi, br, wbr, ins, del, img, embed, object, iframe, map, area, script, noscript, ruby, video, audio, input, textarea, select, button, label, output, datalist, keygen, progress, command, canvas, time, meter

sofern man diesen Elementen nicht die Eigenschaft beraubt, weswegen sie Textelemente sind.
Wenn du also aus einem Textelement ein Blockelement machst, dann kannst du Text-align auf dieses Element nicht mehr anwenden. Verwende für diese Fälle margin-left:auto zusammen mit margin-right:auto.

Ein Bild hat immer eine Feste Breite, wie soll es sonst angezeigt werden?

EDit: Zur Zeit funktionieren alle Dinge die jemals eingeführt waren und zum Standard geworden sind. Alte Webseiten aus den Anfangsjahren könnten ja sonst gar nicht dargestellt werden.

Geändert von explanator (26.03.2013 um 22:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.03.2013, 22:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2011
Beiträge: 123
Barodscheff befindet sich auf einem aufstrebenden Ast
Standard

Hi,

du solltest mal CSS4you studieren.

Zu text-align:
text-align: Horizontale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Wenn du bisschen überlegst, solltest du auch von alleine drauf kommen wofür TEXT-align ist Bei CSS4you kannst du dich auch hervorragend in block und inline Elemente einlesen. Ist auch wichtig zum Positionieren.

Hier mal als Tipp:
Stelle das Bild mittels display: block als Block-Element dar. Einem Element, z.B. dem li Element gibst du eine feste Höhe. Dann funktioniert margin: 0 auto

LG

Edit: Explanator, warum hat jedes Bild eine feste Breite? Responsive Webdesign basiert darauf, dass Bilder keine feste Breite haben.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.03.2013, 22:28
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Eine dynamisches Bild habe ich noch nicht gesehen. Ein Bild ist eine Fläche also Höhe mal Breite.
Dass ich keine Breite angeben muss, heisst ja nicht, dass das Bild keine Breite hat. Der Broser holt sich die Breite dann eben aus den Bilddaten.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.03.2013, 00:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Vielen dank für eure Antworten!!!
Also; das Bild hat keine Feste Breite, weil es (je nach Browserfensterhöhe) auf jeden Fall in voller Höhe dargestellt werden soll. Die Breite ergibt sich daraus. (es soll ja nicht verzerrt werden)
Und außerdem wird das ganze je nach Browserbreite und Höhe(in dem Fall nur wegen der Höhe) sowieso prozentual verkleinert wegen responsive-design.

Deshalb kann ich dem Bild keine feste Höhe geben, ich werde nämlich gelyncht, wenn von dem Bild unten was abgeschnitten wird. In der Breite ist es seltsamersweise egal ...

also was ich jetzt nicht verstehe: auf der empfohlenen Seite (CSS-Referenz auf CSS 4 You - The Finest in Stylesheets) steht bei text- align:
Anwendbar auf: Block-Elemente
hä - ich dachte - eben genau nicht?
Was hab ich da falsch verstanden?


ich hab auf meiner seite jetzt die TATSÄCHLICH! vorhandenen "display:block"- Angaben auskommentiert, im umschliessenden <li> steht "text-align:center".
- leider ist mein Bild immer noch nicht center.

Fällt jemand noch was ein?
Es ist mir unangenehm, den link zur Seite hier zu posten, weil die für jemand anderen ist.
Gibts einen Umweg?

vielen Dank für eure Hilfe
Irmen
Mit Zitat antworten
  #6 (permalink)  
Alt 27.03.2013, 00:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von irmen Beitrag anzeigen
Also; das Bild hat keine Feste Breite, weil es (je nach Browserfensterhöhe) auf jeden Fall in voller Höhe dargestellt werden soll. Die Breite ergibt sich daraus. (es soll ja nicht verzerrt werden)
Bilder sind ersetzte Elemente und haben eine intrinsische Breite (und Höhe). Deshalb ist es möglich, sie proportional zu skalieren.
Das Bild hat also immer eine "feste" Breite -- im Unterschied zu nicht-ersetzten Elementen.

Zitat:
also was ich jetzt nicht verstehe: auf der empfohlenen Seite (CSS-Referenz auf CSS 4 You - The Finest in Stylesheets) steht bei text- align:
Anwendbar auf: Block-Elemente
hä - ich dachte - eben genau nicht?
Was hab ich da falsch verstanden?
text-align richtet Inline-Inhalt in einem Blockelement aus. Angewendet wird es auf das Blockelement, die Wirkung ist bei den Inline-Inhalten sichtbar.

Zitat:
Es ist mir unangenehm, den link zur Seite hier zu posten, weil die für jemand anderen ist.
Dann erstell einen neutralen Testcase und verlink den!
Mit Zitat antworten
  #7 (permalink)  
Alt 27.03.2013, 00:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Danke verstanden!
Werde neutralen test case erstellen.

bis später
nochmal vielen dank!
Mit Zitat antworten
  #8 (permalink)  
Alt 27.03.2013, 09:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2011
Beiträge: 123
Barodscheff befindet sich auf einem aufstrebenden Ast
Standard

Ich habe mir dein Problem nochmals durchgelesen und es jetzt vielleicht verstanden. Ich glaube, dass hier ein grundsätzlicher Gedankenfehler vorliegt.

Um es zusammenzufassen:
Du möchtest ein füllendes Bild haben. Es soll sich dynamisch dem Fenster anpassen und darf in der Breite abgeschnitten werden. In der Höhe soll es immer voll sichtbar bleiben.

Das klingt mir ganz danach, dass es verkehrt ist ein img-Element zu verwenden. Dein Ziel lässt sich mit background-image und background-size: cover viel besser lösen (vorausgesetzt ich habe es richtig verstanden :P)

Ich habe die Situation, so wie ich sie verstanden habe, nachgebaut.
Tinkerbin

Die height des li-Elements steht dabei für die Höhe des Bildschirms.

Meintest du das so?
LG
Mit Zitat antworten
  #9 (permalink)  
Alt 27.03.2013, 10:56
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Du bist aber ein Schatz!!!

Wenn man das also mit einem img garnicht hinkriegen kann, dann versuche ich mal, das js so umzubasteln, daß statt Bilder Hintergrundbilder gezeigt werden.
Mal sehen, ob ich das kann - es ist nämlich die Bildergalerie responsiveslides von viljamis, die ich verwende.

Ich melde mich wieder, wenn ich Erfolg habe!

Vielen Dank für deine Mühe, das hat mir sehr weitergeholfen.
Irmen
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.03.2013, 12:04
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallöchen,

Zitat:
Zitat von irmen Beitrag anzeigen
Und außerdem wird das ganze je nach Browserbreite und Höhe(in dem Fall nur wegen der Höhe) sowieso prozentual verkleinert wegen responsive-design.
in diesem Zusammenhang sollte man dringend darauf achten, dass man mobile Endgeräte nicht mit großen Bildern bewirft, welche sie dann auch noch selbst runterskalieren müssen. Hier kann man sich, durch eine gute Lösung, viel Ladezeit und Performance sparen. Am besten sendet man dem Smartphone kleinere Versionen der Bilder.

Zitat:
Zitat von irmen Beitrag anzeigen
ich hab auf meiner seite jetzt die TATSÄCHLICH! vorhandenen "display:block"- Angaben auskommentiert, im umschliessenden <li> steht "text-align:center".
- leider ist mein Bild immer noch nicht center.
Auch Bilder kann man mittles margin:0 auto; problemlos zentrieren (display:block nicht vergessen). Dieses Beispiel soll das Ganze demonstrieren.

Mit freundlichen Grüßen,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:03 Uhr.