Placement de texte dans widget html

Cartes Ethernet IPX800
1

Bonjour,

j’ai quelques soucis de placement de texte ou d’icône dans le widget html, le positionnement gauche droite fonctionne mais pas le haut bas. J’ai essayé avec la commande margin, padding … rien y fait
arrivez vous à centrer verticalement vos textes ?

<span style='padding: 20px 20px;' class="glyphicons glyphicons-euro"></span>

merci

2

Bonsoir,
Il faut ajouter au style
Valign:middle
Cdt

3

Bonjour,

@fgtoul j’ai testé le Valign mais sans éffet. marche t’il chez vous ou est ce ma syntaxe qui n’ai pas bonne ?

<span style='color:#${Z2ManuAuto=="0"?"eee":"3FB740"}; Valign:middle;' class="glyphicons glyphicons-history x2" onclick="newAJAXCommand('/api/xdevices.json?ToggleVI=112');"></span>

merci

4

bonjour
essayez de mettre le valign sur la balise <div>

<div valign=middle>
<span style='color:#${Z2ManuAuto=="0"?"eee":"3FB740"};' class="glyphicons glyphicons-history x2" onclick="newAJAXCommand('/api/xdevices.json?ToggleVI=112');"></span>
</div>

au dessus, c’est une méthode simple et ancienne. Si elle n’est pas reconnue par votre navigateur, vous pouvez essayer

<div style='display:table;'>
<span style='display:table-cell;vertical-align:middle;color:#${Z2ManuAuto=="0"?"eee":"3FB740"};' class="glyphicons glyphicons-history x2" onclick="newAJAXCommand('/api/xdevices.json?ToggleVI=112');"></span>
</div>
1 « J'aime »
5

merci fgtoul, la première me place tout en haut à gauche, la seconde en haut et un peu à droite !!
j’utilise google chrome sur mac.
ces commandes centre bien le texte verticalement sur votre widget ?

6

1er code ancien, peut fonctionner sur anciennes versions de navigateurs.

Le 2eme code fonctionne avec chrome et Firefox, pas IE.
Tests réalisés sur pc, sans ipx.

7

bonjour,

si les CSS ci-dessus ne fonctionnent pas sur Mac, vous pouvez utiliser des balises <Table><tr><td></td></tr></table> :

Le code ci-dessus, même si jugé déprécié en HTLML5 / CSS3 a été testé avec succès.
Il est simple à mettre en oeuvre.

Pour rappel,c’est votre navigateur qui exécute le code. Ce dernier est donc indépendant de l’IPX.
Donc s’il ne fonctionne pas chez vous, il faudra voir avec un autre navigateur sur Mac ou PC.

1 « J'aime »
8

Bonjour,
j’y comprend rien ! :frowning: j’ai essayer avec chrome, ie et firefox sur PC est aucun ne centre verticalement même avec les nouvelles balises de ton post précédent.

peux être dans le widget html de l’IPX le « top » n’est pas défini ou connu puisque le widget peut être déplacé ? contrairement aux gauche et droite qui sont fixe avec les colonnes.

9

alors il reste <table> à tester, ce qui a fonctionné pour d’autres.

sinon,@ZogStriP as-tu une autre solution ?N’ayant pas d’IPX v4, je ne connais pas les class CSS utilisées pour les widgets.

c’est la position du conteneur DIV qui était utilisée et connue.

10

CSS et les joies du centrage horizontal et vertical :cry:

@max, si vous utilisez un navigateur à jour, ceci devrait fonctionner

<div style="display: flex; align-items: center;">
    <span style='padding: 20px 20px;' class="glyphicons glyphicons-euro"></span>
</div>

Une excellente ressource pour savoir comment center en CSS : http://howtocenterincss.com/

2 « J'aime »
11

Super @ZogStriP ! merci beaucoup, d’après ton post je vois que je suis pas le seul à peiner sur cette commande ça me rassure d’un sens :smiley:

j’ai donc utilisé la commande

 <div style="display: flex; align-items: center;">

avec margin et ça fonctionne, encore merci @ZogStriP @fgtoul pour l’aide c’est super

2 « J'aime »