✔ Play/Pause item mittig ausrichten

[Loveboat]

Hallo zusammen,

ich habe eine Bildergalerie mit jquery erstellt, diese funktioniert wunderbar.

Hier der Code dazu:

<div class="multiple_images">
<div class="sliderpic" id="sliderPic1">
<img src="images/blogpics/image_blog34_152_984.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic2">
<img src="images/blogpics/image_blog34_152_985.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic3">
<img src="images/blogpics/image_blog34_152_986.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic4">
<img src="images/blogpics/image_blog34_152_987.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic5">
<img src="images/blogpics/image_blog34_152_988.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic6">
<img src="images/blogpics/image_blog34_152_989.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic7">
<img src="images/blogpics/image_blog34_152_990.jpg" alt="">
</div>
</div>

CSS-Code:

.multiple_images {
width: 100%;
height: auto;
}

.multiple_images img {
width: 100%;
height: auto;
}

Jetzt möchte ich gerne ein Play bzw. Pause-Button mittig über den Bildern darstellen lassen. Dieser Button kommt aus dem FontAwesome.

HTML-Code:

<i class="fa fa-play"></i>

bzw.

<i class="fa fa-pause"></i>

Anforderung für den Button:
- Hintergrund weiß mit opacity 0,4
- Rund
- Höhe ca. 40% der Bildhöhe und gleiche Breite wie Höhe

Problem: von den Bildern gibt es keine Höhenangabe in Pixeln da diese aufgrund dem responsiven Design variiert. Das heißt, auf mobilen Geräten darf der Button auch nur die 40% der Bildhöhe haben.

Mein bisheriger CSS-Code:

.multiple_images i {
background-color: #fff;
opacity: 0.4;
}

Mit absoluten PX-Werten bekomme ich es mittig hin, aber wie muss es bei dynamischen sein?

Hoffe ihr könnt mir helfen. Solltet Ihr noch Infos benötigen -> lasst es mich wissen.

Danke und Gruß
Shungo

 

[SpiceLab]

Problem: von den Bildern gibt es keine Höhenangabe in Pixeln da diese aufgrund dem responsiven Design variiert.

Hier sollte das Passende für Dein Vorhaben dabei sein: CSS: 4 Lösungen für eine vertikale Zentrierung bei unbekannter Höhe

 

[Loveboat]

Danke, werde ich heute Abend mal austesten.

 

[Loveboat]

Hi SpiceLab,

habe es mal ausprobiert, aber so ganz glücklich bin ich noch nicht. Bekomme das Play- bzw. Pause-Symbol nicht groß.

Hier mein aktueller Code für CSS:

.multiple-Images {
Position: relative;
}

.ctl-table {
width: 100%;
height: 100%;
z-index: 10000;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}

.ctl-table td {
vertical-align: middle;
text-align: center;
}

.ctl-table td i {
background-color: #fff;
padding: 6%;
border-radius: 50%;
opacity: 0.5;
font-size: 3em;
}

Und hier mein HTML-Code:

<div class="multiple_images">
<table class="ctl-table">
<tr>
<td><i class="ctl-image fa fa-pause"></i></td>
</tr>
</table>
<div class="sliderpic" id="sliderPic1">
<img src="images/blogpics/image_blog26_89_141.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic2">
<img src="images/blogpics/image_blog26_89_142.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic3">
<img src="images/blogpics/image_blog26_89_143.jpg" alt="">
</div>
<div class="sliderpic" id="sliderPic4">
<img src="images/blogpics/image_blog26_89_144.jpg" alt="">
<div>
<div class="sliderpic" id="sliderPic5">
<img src="images/blogpics/image_blog26_89_145.jpg" alt="">
</div>
</div>

Im Anhang mal zwei Bilder. Beim small wurde der Browser sehr schmal zusammengeschoben, beim big war er breiter.

Hoffe das hilft weiter bei meinem Problem.

Gruß
Shungo

 

[SpiceLab]

Hoffe das hilft weiter bei meinem Problem.

Hier wäre ein Link hilfreich, um das Ganze live in Augenschein nehmen zu können.

Und wozu die HTML-Tabelle? In den 4 Lösungsansätzen kommt sie überhaupt nicht zum Einsatz. Das letzte Beispiel setzt auf eine CSS-Tabelle (display:table / display:table-cell), um den Inhalt mit vertical-align:middle vertikal zu zentrieren.

 

[Loveboat]

hi SpiceLab,

irgendwie will es nicht. Habe die jetzt mal alle durchprobiert aber nichts will. :-(

Ich schicke Dir den Link mal per PN da er nicht öffentlich werden soll, sofern das ok ist.

Gruß
Shungo

 

[SpiceLab]

Ich schicke Dir den Link mal per PN da er nicht öffentlich werden soll, sofern das ok ist.

Du hast grünes Licht

 

[SpiceLab]

Der Pause-Button ist vertikal zentriert.

Und bezüglich seiner Größe in Abhängigkeit zur Fensterbreite, solltest Du die definierte Schriftgröße (14px/1) per Media Queries steuern.

 

[Loveboat]

aber er ist links und bekomme ihn nicht zentriert.
Und ganz mittig ist er auch nicht, wenn Du das Fenster mal schmäler machst siehst Du es.

 

[SpiceLab]

aber er ist links und bekomme ihn nicht zentriert.

Sorry, hatte das Problem, auf die fehlenden Grafikhöhen bezogen, so verstanden, dass es Dir ausschließlich um die vertikale Zentrierung geht.

Anyway, horizontale u. vertikale Zentrierung lokal (und am lebenden Objekt per Entwicklerwerkzeug) erfolgreich getestet:

.multiple_images .fa-box {
   width: 80px;
   height: 80px;
   background-color: red;
   opacity: 0.5;
   border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 9999
}

.multiple_images .fa-box i {
  font-size: 2.5em;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}