28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image vertical-align: middle déborde conteneur inline-block

Modérateur
Bonjour,

Difficile de donner un titre à mon problème, désolé !
Je place une vignette de taille 600x300px dans un div de taille 50%x300px. L'image est centrée horizontalement mais en ce qui concerne le positionnement vertical, je n'arrive pas à mes fins.
Je vous ai préparé une page de test pour que vous voyiez ce qui se passe sur tous les navigateurs "modernes" :
http://jojaba.fr/pb_img_deborde/

J'ai vraiment essayé pas mal de choses, mais je n'arrive pas à résoudre ça.

Merci d'avance, Joël

PS : Je vous colle le html et la css ci-dessous mais vous pourrez les voir sur la page de test Smiley cligne

HTML :
<article class="row odd" role="article">
        
          <div class="entry-description">
            
                        
            <header class="entry-header">
                <h1 class="entry-title">Titre</h1>	
            </header>

            <div class="entry-summary">
                <p>La vignette avec <code>vertical-align: middle</code>. Vous remarquerez qu'elle sort de son parent vers le bas. Je n'arrive pas à comprendre pourquoi. Je voudrais que lorsqu'on passe à une résolution plus faible, la vignette soit centrée verticalement (essayez en redimensionnant votre fenêtre de navigateur).</p>
            </div>

    
        </div><!-- end .entry-description
        
     --><div class="entry-thumbnail">
           
            <img src="default_thumbnail.jpg" alt="Vignette 600x300px" />
             
            
        </div><!-- end .entry-thumbnail -->
    
    </article>


CSS
body, html {
            margin: 0;
            padding: 0;
        }
        
        h1, p {
            margin: 0;
            padding: 1em;
        }
        
        .row {
            width: 100%;
            height: 300px;
        }
        
        .row .entry-description {
            display: inline-block;
            width: 50%;
            height: 100%;
            color: #FFF;
            vertical-align: top;
        }
        
        .row .entry-thumbnail {
            display: inline-block;
            width: 50%;
            height: 300px;
            line-height: 300px;
            text-align: center;
            vertical-align: middle;
        }
        
        .row img {
            max-height: 300px;
            max-width: 100%;
            vertical-align: middle;
        }
        
        .odd {
            background-color: rgb(51, 102, 0);
        }

Modifié par jojaba (06 Jan 2015 - 15:02)
Bonjour;

Avec ça c'est bon :


.row .entry-thumbnail {line-height: 298px;}


Mais, pourquoi ? ^^
Modérateur
Merci pour l'astuce !
Chez moi c'est la valeur suivante qui fonctionne :
.row .entry-thumbnail {
            display: inline-block;
            width: 50%;
            height: 300px;
           [b] line-height: 296px;[/b]
            text-align: center;
            vertical-align: middle;
}
(296px et non 298px)

J'aimerais bien savoir également d'où vient ce problème...
Modérateur
Parce que vertical-align ne centre pas le centre de l'élément avec le centre du parent, mais le centre de l'élément avec «la ligne de base plus la moitié de l'hauteur d'x»

a écrit :

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.


Cette ligne se trouve être généralement un peu en-dessous de la «moitié du parent» mais selon les polices cette différence peut être plus ou moins grande. Par exemple je n'ai pas de décalage si je met une Helvetica dans ton exemple, mais bien plus grand avec une Times.
Si vous utilisez des valeurs différentes pour «réequilibrer» c'est sans doute parce que vous ne l'affichez pas avec les mêmes polices.

Le but original de vertical-align est d'aligner avec le texte et cela fonctionne bien, cette utilisation détournée de mise en page à du coup parfois quelques problèmes.
Modifié par kustolovic (06 Jan 2015 - 14:30)
Modérateur
Merci Kustolovic pour ces précisions techniques.
Du coup, j'ai intérêt à trouver une autre solution pour centrer verticalement l'image. J'avais pensé rendre l'image en block puis lui indiquer des margin auto mais ça n'a pas fonctionné...

[Edit]
Je vais utiliser la police suivante sur le site :
font-family: Georgia, "DejaVu Serif", Norasi, serif;

J'ai testé avec la ligne suivante :
line-height: 296px;

Ça fonctionne, je garde donc comme c'est Smiley cligne
[/Edit]
Modifié par jojaba (06 Jan 2015 - 15:01)
Modérateur
Sauf que ce n'est pas sûr que les gens l'affichent avec cette police (et encore moins cette version précise que tu utilises).

Sinon vertical-align, dans un contexte de table, fonctionne comme tu l'attends. Donc un peu display: table /table-cell et un soupçon de table-layout: fixed te permet d'obtenir de manière moins bricolée le résultat attendu.
Modérateur
OK,

Dès que j'ai le temps je tente le display table (j'espère que c'est compatible avec IE8) et je soumets le nouveau code ici.
Merci encore.
Modifié par jojaba (06 Jan 2015 - 15:34)
Modérateur
Bon ben, c'est beaucoup mieux avec display: table-row et display: table-cell.
CSS
.row {
            display: table-row;
            width: 100%;
        }
        
        .row .entry-description {
            display: table-cell;
            width: 50%;
            color: #FFF;
            vertical-align: top;
        }
        
        .row .entry-thumbnail {
            display: table-cell;
            width: 50%;
            text-align: center;
            vertical-align: middle;
        }
        
        .row img {
            max-height: 300px;
            max-width: 100%;
            vertical-align: middle;
        }
Sujet clos
Aller à