[HTML & CSS]Centrage d'un div

**jowo** · 24/04/2006, 16h34

Bonjour,

J'ai un div en position absolu (longueur fixe) et j'aimerais qu'une image
soit centrée mais que le texte accompagnant l'image soit aligné au début de l'image.

Exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                    Text                                    x
x                    xxxxxxxxxxxxxxxxxxxxxxxxx               x
x                    x Image de longueur     x               x
x                    x variable qui doit     x               x
x                    x être centrée          x               x
x                    xxxxxxxxxxxxxxxxxxxxxxxxx               x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Je suis à votre disposition si ma demande n'est pas trés claire

**Swoög** · 24/04/2006, 16h36

Yo ! que penses-tu de ça :

Code :

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

1
2
3
4
5
6
<div id="pos_abso">
<div id="margin_left_et_right_auto_text_align_left">
Text
<img id="display_block_margin_left_et_right_auto"/>
</div>
</div>

?

**jowo** · 24/04/2006, 18h18

Envoyé par Swoög

Yo ! que penses-tu de ça :

Code :

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

1
2
3
4
5
6
<div id="pos_abso">
<div id="margin_left_et_right_auto_text_align_left">
Text
<img id="display_block_margin_left_et_right_auto"/>
</div>
</div>

?

Le résultat n'est pas celui que j'attends. Il faut que je continue ma recherche sinon il ne me reste plus que la balise table grrrrrrrrr

**Swoög** · 24/04/2006, 18h27

et ceci ? :

Code :

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

1
2
3
4
5
6
<div style="width : 600px;">
<div style="width : 0px; margin-left : auto; margin-right : auto; text-align : center">
Text<br />
<img style="display: block; margin-left : auto; margin-right : auto" src="img.jpg"/>
</div>
</div>

bon, le centrage n'est pas parfait, mais c'est toujours mieux que rien, non ?

**jowo** · 25/04/2006, 07h35

Désolé Swoög mais je ne peux pas me permettre de l'à-peu-près. Je te tiens à te remercie pour ton aide sans oublier titoumimi.

Si je trouve une solution à mon problème, je viendrai vous la présenter.

Merci encore

Fabio

**titoumimi** · 25/04/2006, 08h34

ton texte, tu veux qu'il fasse la largeur de l'image exactement ?

Si non, mettre ton texte dans un Div en utilisant le max-width pourrait être une solution...

**titoumimi** · 24/04/2006, 16h36

Je pense à un deuxième div, contenu dans le premier et centré, qui contiendrai l'image et le texte... (de la largeur de l'image le deuxième div, et le tout en text-align=left, ca devrait le faire non ? )

EDIT : grillé

**jowo** · 24/04/2006, 18h17

Envoyé par titoumimi

Je pense à un deuxième div, contenu dans le premier et centré, qui contiendrai l'image et le texte... (de la largeur de l'image le deuxième div, et le tout en text-align=left, ca devrait le faire non ? )

EDIT : grillé

Malheureusement la largeur de l'image n'est pas connue d'avance. En effet avec une largeur d'image fixe, ça aurait fonctionné. ;-)

**Swoög** · 24/04/2006, 18h18

heu... avec ma solution, je ne vois pas pourquoi ça marcherais pas ?

**jowo** · 24/04/2006, 18h25

Envoyé par Swoög

heu... avec ma solution, je ne vois pas pourquoi ça marcherais pas ?

Le texte n'est pas aligné au début de l'image (sous FireFox, pas testé sous InternetExplorer).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
    <head>
        <title>Center a picture and a text</title>
        <style type="text/css">
        #abs_div {
          position:absolute;
          top:0px; left:0px;
          width:820px;
          border:1px solid red;
          text-align:center;
        }
        #ad_container {
          border: 1px solid green;
          text-align:left;
        }
        #ad_content {
          display:block;margin-left:auto;margin-right:auto;
        }
        #ad_text {
          background-color:black;
          color:lime;
          font-weight:bolder;
        }
        </style>
    </head>
 
    <body>
    <div id="abs_div">
        <div id="ad_container">
            <span id="ad_text">Texte publicitaire</span>
            <img id="ad_content" src="<a href="http://www.developpez.net/forums/images/logo16.gif">" target="_blank">http://www.developpez.net/forums/images/logo16.gif"></a>
        </div>
    </div>
    </body>
</html>

[HTML & CSS]Centrage d'un div

CSS

Vue hybride

Discussions similaires

Partager

Partager