[HTML & CSS]Centrage d'un div

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:

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

Yo ! que penses-tu de ça :

Code:

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>

?

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é :oops:

Citation:

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é :oops:

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

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

Citation:
Envoyé par Swoög
Yo ! que penses-tu de ça :
Code:

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

Citation:

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:

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>

et ceci ? :

Code:

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 ? ;)

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

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...

Merci titoumini,

Non le texte ne doit pas faire la largeur de l'image (le texte est très court). Mais je ne comprends pas l'utilisation le max_width.

Peux-tu me préciser ton idée?