28172 sujets

CSS et mise en forme, CSS3

Centrage imbriqué (encore)

Salut à tous !

Malgré toutes mes recherches sur le site concernant ma question je suis in-ca-pa-ble de comprendre comment résoudre mon problème.

Je parcours le forum en essayant pas mal de solutions proposées sans jamais y arriver…

De l'aide svp ? Smiley sweatdrop

Il s'agit (encore) de centrer une div verticalement dans une autre ou un élément <section>.

J'aimerais arriver à comprendre comment centrer verticalement la div :

".flexslider"

dans la section ".principal".

En gros entre le manu et le footer, pour être clair.

Voici le code simple.


<body>
<div id="page"> <!-- le wrapper-->

<header>
	<h1>TITRE</h1>
</header>

<section class="sub_header">

    <div class="top_main"> <a href="Untitled-1.html">
      <h1 id="top_title">TITRE 1</h1>
      <h2 id="top_subtitle">SOUS-TITRE</h2>
      </a> 
      
    <nav class="top_nav">
        <span><a href="#">MENU1</a></span>
   		<span><a href="#">MENU2</a></span>
        <span><a href="#">MENU3</a></span>
    </nav>
    
    </div> <!-- END DIV TOP_MAIN -->
</section> <!-- END SECTION SUB_HEADER -->

<section class="principal">
      <div class="flexslider">
    
</div> <!-- end slideshow Flexslider ]--> 
</section> <!-- end section principal ]--> 

<footer>
</footer>


C'est un peu tricky, j'espère vraiment que vous pourrez m'aider.

Merci par avance !
Modifié par Aessian (03 Sep 2013 - 13:03)
si tu n'as pas d'autre élément dans ta section. Un truc bête serait de mettre du padding top/bottom dans ton conteneur et tu es sur qu'il aura la même chose donc centré verticalement.
Salut artsx !

Merci d'avoir répondu.

Hélas ça ne peut fonctionner, la taille de la section est fluide, si je mets un padding top/bottom rien ne va plus.

J'aimerai bien comprendre comment centrer verticalement la div "slider" entre la navigation et le footer, de manière à ce que tout colle toujours quelques soit la taille du navigateur…

Pas facile. Des idées ?
Si j'ai bien compris tu as :
<nav></nav>
<contenu à centrer />
<footer>

Tu veux que ton contenu ai le même espace entre nav > contenu et contenu > footer ou j'ai rien compris ?
J'aimerais centrer verticalement les éléments :

<section class="principal">
<div class="flexslider"> </div>
</section>

entre les éléments <nav> et <footer> de manière à ce que le contenu soit toujours centré verticalement quel que soit la taille entre <nav> et <footer>.

L'élément à centrer ne peut pas avoir de taille fixe, aucune des techniques que j’essaie ne fonctionne…
Bonjour,

en mettant .principal en display: table-row et ta div .flexslider en display: table-cell, tu devrais y arriver avec un simple vertical-align: middle.

As-tu déjà essayé cette solution ?
Salut Ten,

rien n'y fait, cette solution je l'ai déjà essayée et ça ne fonctionne pas dans mon cas.

Je ne comprends pourquoi je n'arrive pas à faire prendre à ma div toute la place entre <nav> et <footer>.

Si je passe la div en height: 100% alors elle dépasse très largement en dessous du footer.

Je suis bloqué, bloqué, bloqué…
Possible d'avoir un lien pour checker tout ça ?
Parce que j'ai l'impression de pas tout piger Smiley lol
ok, c'est vrai que c'est un peu flou tout ça.

Un lien temporaire vers la page en question;

aessian.pagesperso-orange.fr
Modifié par Aessian (03 Sep 2013 - 16:03)
Sujet clos
Aller à