zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Link Element 1:1 mit zentriertem Text

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2016, 09:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Beiträge: 35
Kipperdesign befindet sich auf einem aufstrebenden Ast
Frage 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>
CSS
Code:
a {
	display: block;
	height: 0;
	width: 25%;
	padding-bottom: 25%;
	background-size: 100% auto;
	float: left;
}
Nun aber folgendes Problem

Ich würde das span Element gerne als

Code:
display: table-cell;
vertical-align: middle;
text-align: center;
mit 100% width / height basierend auf dem übergeordneten a-Elements darstellen, sodass der Text anschliessend horizontal/vertikal mittig dargestellt wird.

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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2016, 09:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.04.2016, 10:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2012
Beiträge: 35
Kipperdesign befindet sich auf einem aufstrebenden Ast
Standard

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%);
}
Nochmals vielen herzlichen Dank an Dich!


Freundliche Grüsse,

PK
Mit Zitat antworten
  #4 (permalink)  
Alt 05.04.2016, 10:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Warum verwendest du nicht flexbox?
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:54 Uhr.