WBCE CMS Forum

byteworker

Mitglied

CSS img vertical-align middle

Raufe mir gerade die Haare aus:

http://testpage.grafik-job.de/

ich schraube noch am Design herum. Oben soll ein Logo rein statt des Textes. Das Ding steckt in einer Klasse "logoimg" und die habe ich auch vermittelt bekommen, sowei responsive kleiner (im Firefox)

Im Safari auf dem Mac und in Chrome macht sie nicht mit, das Logo klemmt da immer am oberen Rand und wird auch nicht responsiv kleiner.

im Template:

<a href="<?php echo WB_URL; ?>/"><img class="logoimg" src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"></a>

CSS habe ich so aufgebaut:

.logo {
            color: #f6755e;
            font-family: "Poppins", Arial, Helvetica, sans-serif;
            font-size: 2.5em;
            letter-spacing: 0px;
            padding-top: 10px;
            font-weight: 900;
            text-decoration: none;
            display: inline-block;
            display: table;
           
        }
       
       
        .logoimg {
            display: table-cell;
            vertical-align: middle;
            border-style: none;
        }

Im FF geht es wunderbar, in Chrome und Safari klebt es stur oben an. Jemand einen Rat?

---

= Templates für WBCE

florian

Administrator

Re: CSS img vertical-align middle

vielleicht das
display:table-cell
rausnehmen? Dann gehts zumindest in chrome (und in ff sowieso). (Kein Mac zum Testen zur Hand)

Beitrag geändert von florian (02.07.2018 16:06:46)

byteworker

Mitglied

Re: CSS img vertical-align middle

Ja habe ich wieder rausgenommen, allerdings läuft es hier am Mac iauf Chrome und Safari noch nicht.
Werde mir das später auf der Windose daheim ansehen. Fummelei das!

---

= Templates für WBCE

jean

Mitglied

Re: CSS img vertical-align middle

... der Code war ja nicht ganz vollständig, und inzwischen sieht es ja auch anders aus ... Aber für alle Fälle, braucht man ja immer mal wieder:
https://css-tricks.com/centering-css-complete-guide/
https://www.chunqiuyiyu.com/css-centering-explorer/
http://howtocenterincss.com/
https://css-tricks.com/centering-in-the-unknown/
https://css-tricks.com/centering-the-ne … olest-way/