Bonjour,

Voici mon problème :

J'ai utilisé flexbox pour aligner ces deux éléments, mais y'a un soucis : En gros si je veux mettre du texte, bah ce sera pas vraiment aligné. J'ai fait une barre juste en dessous pour que vous voyez la présence d'un léger décalage :/

Voici le code HTML :

<div id="test">
<i class="fas fa-code"></i>
<i class="fas fa-gamepad"></i>
</div>

#test{
    transform: translate(5%, -50%);
    display: flex;
    flex-wrap: nowrap;
}

.fas{
    font-size: 150px;
    margin: 190pt;
}

Et donc si je veux mettre du texte, ce sera moche vu que les images ne seront pas alignés :/

PS : J'utilise materializecss, pour plus d'info je vous met le lien de la balise code : https://fontawesome.com/icons/code?style=solid et celui de la manette : https://fontawesome.com/icons/gamepad?style=solid car ça peut éventuellement vous être utile

Merci d'avance.

Bonne soirée !

Salut, 

Tu utilises flexbox donc tu peux regarder la propriété align-items... 😉

Mewen_bzh a écrit:

Salut, 

Tu utilises flexbox donc tu peux regarder la propriété align-items... 😉

Bonjour,

Mais si je ne dit pas de bêtises materialize fonctionne sur un système de 12 colonnes non ?

exen a écrit:

Bonjour,

Mais si je ne dit pas de bêtises materialize fonctionne sur un système de 12 colonnes non ?

Si si;

En fait tu est dans un fonctionnement sur row col avec offset

https://materializecss.com/grid.html

un peut dans ce genre

<div class="row">
  <i class="col offset-l4 l1 fas fa-code"></i>
  <a class="col l2 center"> ton super texte de base </a>
  <i class="col l1 fas fa-gamepad "></i>
</div>

EDIT: La je ne t'ai mis qu'un comportement pour ecrans large pour le reste tu rajoute les xs, s, xl

-
Edité par exen 21 juillet 2018 à 23:34:08

Ah ça ! Oui mais je sais le faire.

Le soucis en fait c'est que si je veux ajouter du texte en dessous des deux images, bah y'aura un léger décalage, tu vois ce que je veux dire ?

D'où l'image avec le segment dans mon premier message :).

Perso je ne vois pas de décalage, enfin si mais infime, tu es à 18.1334 de largeur avec </> et 18.3333 avec la manette.

franchement je viens de tester entre deux truc, tu vois un décalage si tu teste çà ? (sans ton CSS perso bien-sure)

<div class="row">
  <i class="col offset-l4 l1 ica fas fa-code"></i>
  <i class="col offset-l2 l1 fas fa-gamepad"></i>
</div>
<div class="row">
  <a class="col offset-l5 l2 center"> ton super texte de base </a>
</div>

exen a écrit:

Perso je ne vois pas de décalage, enfin si mais infime, tu es à 18.1334 de largeur avec </> et 18.3333 avec la manette.

franchement je viens de tester entre deux truc, tu vois un décalage si tu teste çà ? (sans ton CSS perso bien-sure)

<div class="row">
  <i class="col offset-l4 l1 ica fas fa-code"></i>
  <i class="col offset-l2 l1 fas fa-gamepad"></i>
</div>
<div class="row">
  <a class="col offset-l5 l2 center"> ton super texte de base </a>
</div>

Ha, ca, tu ne peut pas le changer ... quoi que.. ici tu peut la créer comme tu le désir en rétrécissant le slash

https://icomoon.io/#docs

Au passage les icône c'est du SVG tu peut aussi la coder.

code.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="160" viewBox="0 0 20 16">
<path fill="#000000" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
<path fill="#000000" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
<path fill="#000000" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
</svg>

-
Edité par exen 22 juillet 2018 à 3:13:18

exen a écrit:

Ha, ca, tu ne peut pas le changer ... quoi que.. ici tu peut la créer comme tu le désir en rétrécissant le slash

https://icomoon.io/#docs

Au passage les icône c'est du SVG tu peut aussi la coder.

code.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="160" viewBox="0 0 20 16">
<path fill="#000000" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
<path fill="#000000" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
<path fill="#000000" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
</svg>

-
Edité par exen il y a environ 11 heures

Ouep mais je sais pas le faire ça, et puis pas grave je vais me débrouiller, merci :).

Bonne journée !

Prend celle d'ici dans ce cas, c'est le même fonctionnement que sur FontAwesome, tu peut aussi télécharger le pack, et l'avantage dans celui-ci c'est que le slash est à la auteur des guillemets.

EDIT : Avec le lien ce serais mieux

https://icomoon.io/#icons-icomoon

-
Edité par exen 22 juillet 2018 à 15:32:10

Hello,

Je te conseille de regarder avec l'inspecteur de ton navigateur pour voir qu'est-ce qui provoque cela,

peut-être un margin, un padding ou même un plus gros contour blanc autour d'une des deux images ..

Cordialement

Bon courage !

Bonjour,

Je suis revenu un peut sur ton problème, autre possibilitée

        <div class="row">
           <!--<i class="col offset-l4 l1 ica fas fa-3x fa-code cod"></i>-->
          <i class="col offset-l4 l1 large material-icons">code</i>      
          <i class="col offset-l2 l1 fas fa-6x fa-gamepad"></i>
        </div>
        
        <div class="row">
          <a class="col offset-l5 l2 center"> ton super texte de base </a>
        </div>