Discussion :

[darkman19320]

Bonjour tout le monde,

Je cherche depuis cette aprem comment centrer verticalement un fieldset et un input (de type bouton).

Voici un exemple de code:
le html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<form method="post" action="null.php">
    <fieldset>
        <legend>Toto</legend>
        <p>blabla</p>
        <p>blabla2</p>
    </fieldset>
    <input type="button" value="B" />
</form>

J'ai essayé ce css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
fieldset{
    float: left;
}
input{
    clear: both;
    vertical-align: middle;
}

Mais malheureusement, je dois mal m'y prendre...

J'ai essayé de bricoler avec les marges et tout ces paramètres mais rien n'y fait.

Avez-vous des conseils?

Merci

[s0h3ck]

Bonjour,

Dans ce contexte, vous pouvez utiliser différentes astuces. La première serait d'appliquer à la balise form des propriétés CSS avec margin: auto et une width définie pour que margin ne l'ignore pas. Une autre solution pourrait être d'entourer le tout d'une balise section, div ou autre, mais c'est moins apprécié dans ce contexte. C'est pourquoi je t'ai fait quelques modifications de ta feuille de style en cascade (CSS) : cliquez ici.

Bonne continuité,
s0h3ck.

[Bisûnûrs]

La propriété vertical-align sert à aligner deux éléments inline entre eux (ou un élément dans une cellule de tableau). Rajouter un float:left; à ton fieldset lui confère un contexte de formatage block, ce qui fait que ça ne fonctionne pas.
Enlève donc ce float:left; et rajoute un display:inline-block; ainsi qu'un vertical-align:middle; à ton fieldset.

[s0h3ck]

Ha, je n'ai pas compris le problème de ce point de vue.
Voici donc le JS Bin décrivant l'idée de ce que Bisûnûrs a mentionné.

PS: Le post est-il résolu ? Si c'est le cas, merci de cliquez résolu. Sinon, spécifiez davantage le problème.
Merci de votre collaboration.

[darkman19320]

Désolé pour cette réponse très tardive.

Merci à vous deux pour vos réponses qui fonctionnent parfaitement!

Je mets en résolu.