• Un menu

    Je fais un essai sur un code qui permet de réaliser un menu, par exemple, avec un texte centré horizontalement et verticalement.

    Le principe est de donner à un cadre, des caractéristiques de tableau par display:table; et, pour chaque bouton, des caractéristiques de cellule de tableau par: display:table-cell;

    Le gros avantage est que vous allez définir la taille du cadre général et le nombre de bouton et le programme va calculer la taille de chacun et les aligner; ainsi, si vous ajoutez ou retirez un ou plusieurs boutons, le menu s'adaptera en conservant ses dimensions extérieures: exemple.

    <div id="ds1">
    <p id="ds2" class="bt"><a style="color: #ffffff; text-shadow: 1px 1px black;" href="https://youtu.be/2iUPb7y0hgE" target="_blank">Lien 1</a></p>
    <p id="ds3" class="bt"><a style="color: #ffffff; text-shadow: 1px 1px black;" href="https://youtu.be/yVSPRNOyxko" target="_blank">Lien 2</a></p>
    <p id="ds4" class="bt"><a style="color: #ffffff; text-shadow: 1px 1px black;" href="https://youtu.be/HsCp5LG_zNE" target="_blank">Lien 3</a></p>
    <p id="ds5" class="bt"><a style="color: #ffffff; text-shadow: 1px 1px black;" href="https://youtu.be/MAp8o_9V_p0" target="_blank">Lien 4</a></p>
    </div>
    <style><!--
    #ds1{width:800px; height:50px; display:table; margin:10px auto;}
    .bt{border-radius:20%; box-shadow:inset 5px 5px 8px white, inset -5px -5px 8px black; text-shadow:1px 1px black; font-size:20pt;}
    #ds2{display:table-cell; text-align:center; vertical-align:middle; background: linear-gradient(to bottom, #ff7400 0%,#ffcda5 100%); }
    #ds3{display:table-cell; text-align:center; vertical-align:middle; background: linear-gradient(to top, #87e0fd 0%,#53cbf1 40%,#074ced 100%);}
    #ds4{display:table-cell; text-align:center; vertical-align:middle; background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%);}
    #ds5{display:table-cell; text-align:center; vertical-align:middle;background: linear-gradient(to top, #cfe7fa 0%,#6393c1 100%);}

     #ds2:hover, #ds3:hover, #ds4:hover, #ds5:hover{vertical-align:bottom;}
    --></style>

    Le centrage horizontal est défini par: text-align:center; et le centrage vertical par: vertical-align:middle;

    Les liens sont créés par le maillon de chaîne de la barre d'outils et la couleur en gradient recopiée sur un générateur gratuit du net.

    Il semble qu'il ne soit pas facile de faire afficher une image, au survol d'un bouton.