|
|||
Link Element 1:1 mit zentriertem Text
Hallo Leute,
Habe nun schon eine ziemliche Weile damit verbracht das Web nach einem Lösungsweg zu durchforsten. Unglücklicherweise ohne Erfolg, daher wende ich mich hilfesuchend an euch. Ich möchte mehrere quadratische Links erstellen, welche per float aneinandergereiht werden und beim anpassen der Browserfenster-Grösse prozentual skalieren. Soweit ohne Probleme wie folgt gelöst: HTML Code:
<a style="background-image: url(01.jpg);"><span>Titel<br />Textlinie</span></a> <a style="background-image: url(02.jpg);"><span>Titel<br />Textlinie</span></a> <a style="background-image: url(03.jpg);"><span>Titel<br />Textlinie</span></a> <a style="background-image: url(04.jpg);"><span>Titel<br />Textlinie</span></a> Code:
a { display: block; height: 0; width: 25%; padding-bottom: 25%; background-size: 100% auto; float: left; } Ich würde das span Element gerne als Code:
display: table-cell; vertical-align: middle; text-align: center; Dies funktioniert so aber nicht da egal welche width / height Angaben ich mache diese ignoriert werden, bzw. nicht angezeigt werden... Nehme mal stark an dass dies etwas damit zu tun hat wie das parent a-Element aufgebaut wurde? Gibt es dazu einen Lösungsweg oder ist diese Art Positionierung so nicht möglich? Könnte mich ansonsten jemand wohin weiterleiten wo so etwas schon mal gelöst wurde? Ich hoffe sehr dass sich ein Lösungsweg für dieses Problem findet lässt. (PS. ab 1001px wird ein anderes CSS geladen, also keine Sorge bezüglich Lesbarkeit falls zu klein skaliert werden sollte...) Freundlichst, PK Geändert von Kipperdesign (05.04.2016 um 09:56 Uhr) |
Sponsored Links |
|
|||
Ich hoffe du meinst mit dem PS dass ab 1001px ein zusätzliches mediaquery zur Anwendung kommt und nicht ein komplett neues CSS geladen wird. Und wieso 1001px und keine em-Angaben?
Aber zu deinem Zentrieren-Problem: Mehr Möglichkeiten etwas zu zentrieren hast du nicht. Und wieso table-cell und keine moderne Lösungen? |
Sponsored Links |
|
|||
Hey cloned,
Vielen herzlichen Dank für den Link, hat mein Problem gelöst! Habe die transform attribute bis anhin nie genutzt Mit table-cell bin ich immer gut zurecht gekommen und das zentrieren hat damit auch immer einwandfrei funktioniert, aber selbstverständlich lerne ich immer gerne was neues dazu! Das span Element wie folgt angesteuert funktioniert nun alles einwandfrei! Code:
span { position: absolute; top: 50%; width: 50%; transform: translate(-50%, -50%); } Freundliche Grüsse, PK |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Float hängt sich durch's padding durch. | nick | CSS | 3 | 16.01.2008 20:24 |
Falsche Darstellung beim Internet Explorer | LordAvalon | CSS | 4 | 09.04.2007 17:22 |
Problem: Überschrift <hx> innerhalb von Abschnitt <p> | Ares | CSS | 7 | 24.10.2006 14:30 |
Webseite in IE/MAXTHON ok, in Firefox zerissen | Midnight | CSS | 50 | 21.02.2006 11:34 |
Bild im Container mittig positionieren... | 18inch | CSS | 5 | 09.07.2005 15:48 |