Verticalement et horizontalement centrer l'image principale (main wrap div)

Question

Verticalement et horizontalement centrer l'image principale (main wrap div)

Demandé el 12 de Mai, 2010: Quand la question a-t-elle été
6436 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Duplicata possible :
Comment centrer un DIV dans un DIV ?

J'essaie maintenant

<html>
<head>

        <title>?????????????????</title>
        <style type="text/css">   
    body
    {

            margin-left: auto;
            margin-right:auto;
    }

    #wrap
    {
            background: black;
            margin-left: auto;
            margin-right:auto;
            height:450px;
            width:450px;
            position:absolute;
            top:50%;
            right:50%;
            left:50%;
            margin-top:-225px;
         }
    </style>
</head>
<body>
        <div id="wrap">
                Hello
        </div>
</body>
</html>

? ????

Demandé el 12 de Mai, 2010 par FredG

Answer 1

5 Réponses

Answer 2

4voto

Jon Purdy Points 19408

vertical-align ne fonctionne pas de la manière dont la plupart des débutants s'attendent à ce qu'il fonctionne.

Ici est un tutoriel qui explique la situation. Il semble que vous souhaitiez la méthode 1.

Répondu el 12 de Mai, 2010 par Jon Purdy (19408 Points )

Answer 3

0voto

mike clagg Points 534

<html>
<head>
    <title>?????????????????</title>
    <style type="text/css">
    .ui-container
    {
        background: red;
    }
    .ui-wrapper
    {
        margin: auto;
        background: black;
        height:450px;
        width:450px;
        color: red;
    }
    </style>
</head>
<body>
    <div class="ui-container">
        <div class="ui-wrapper">
                <p>Hello</p>
        </div>
    </div>
</body>
</html>

Répondu el 12 de Mai, 2010 par mike clagg (534 Points )

Answer 4

0voto

warrenm Points 10124

Ce tutoriel couvre une méthode qui a bien fonctionné pour moi dans le passé.

Répondu el 12 de Mai, 2010 par warrenm (10124 Points )

Answer 5

0voto

Jonathan Sampson Points 121800

Les gens me détesteront peut-être pour avoir suggéré cela, mais il faut le placer dans un espace de travail. TD où l'alignement vertical est encore possible sans se faire mal.

J'ai fourni un exemple de travail ici : http://jsbin.com/ezolu3/edit

Le balisage est le suivant :

<table id="vCent">
  <tbody>
    <tr>
      <td valign="center">

        <div id="foo">
          <p>Using tables incorrectly is wrong, without question. But sometimes there are other things that are more wrong - "wrongerer," if you will. Causing yourself unnecessary frustration trying to get an element to center itself vertically, for example, is one of those <em>wrongerer</em> things. Don't bother, just go with what works.</p>
        </div>

      </td>
    </tr>
  </tbody>
</table>

Répondu el 16 de Mai, 2010 par Jonathan Sampson (121800 Points )

Answer 6

0voto

Eric Points 36290

Essayez ceci :

<html>
    <head>
        <title>?????????????????</title>
        <style type="text/css">
        #content
        {
            background: black;
            margin: -225px;
            height: 450px;
            width: 450px;
        }
        #wrap
        {
            height: 0px;
            width: 0px;

            position:absolute;
            top:50%;
            left:50%;
        }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="content">
                Hello
            </div>
        </div>
    </body>
</html>

Répondu el 23 de Mai, 2010 par Eric (36290 Points )

Verticalement et horizontalement centrer l'image principale (main wrap div)

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Verticalement et horizontalement centrer l'image principale (main wrap div)

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: