|
|||
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 |
Sponsored Links |
|
|||
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) |
Sponsored Links |
|
|||
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. |
|
|||
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. |
|
|||
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 |
|
|||
Zitat:
Das Bild hat also immer eine "feste" Breite -- im Unterschied zu nicht-ersetzten Elementen. Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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 |
|
|||
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 |
Sponsored Links |
|
||||
Hallöchen,
Zitat:
Zitat:
Mit freundlichen Grüßen, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |