Centrage difficile [Débutant(e)]

**Pol63** · 07/04/2015, 16h52

Bonjour,

Ca fait 2 jours que je gratte dans le css de mon 1er site après des jours de tutos, un peu au hasard parfois mais avec de bons résultats dans l'ensemble
mais il me reste un objet qui ne veut pas se déplacer, je voudrais le centrer

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="ShowZone">
  <div class="MiniaturesZone" id="MiniaturesRoot">
    /// des img miniatures sur clic remplit la zone centrale
  </div>
 
  <div id="ImageHolder">
    <img id="Img" data-content=""/>
    <button onclick="AddToCart();" id="ButtonAdd">Ajouter à la sélection</button>
  </div>
 
  <div class="CartZone" id="Cart">
    /// des img miniatures sélectionnés
  </div>
</div>

le css :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.ShowZone{
    position: center;
    height:90%;
    margin:0.5%; /*center-aligned*/
    margin-top:0px;
    margin-bottom:0px;
    padding:4px;
    background:#191919;
    border:1px solid #ffffff;
    border-radius:5px;
}
 
 
.MiniaturesZone{
    width:10%;
    vertical-align:central;
    margin:3px;
    display: inline-block;
    overflow-y: scroll;
    height:99%;
 
}
 
Holder{
    position:absolute;
    width: 76%;
    height: 90.2%;
    margin:3px;
    display: inline-block;
}
 
#Img{     
    position: absolute;
    display: inline-block;
    margin: auto; /*3px;*/
    margin-top:2px;
     /*margin-left: auto;
    margin-right: auto;*/
    max-width:78%; max-height:98%;  height:auto;    
    border:2px solid #ffffff;
    vertical-align:central;
}
 
.CartZone{
    position:absolute;
    width:10%;
    vertical-align:central;
    margin:3px;
    margin-top:10px;
    right:20px;
    /*vertical-align:top;*/
    display: inline-block;
    overflow-y: scroll;
    height:79%;
    margin-top:7%;
 
}

je souhaiterais que MiniaturesZone reste à gauche en pourcentage (ok)
que CartZone soit à droite en pourcentage (ok)
par contre pour metre Img centré dans ShowZone je n'y arrive pas

J'ai mis Img dans ImageHolder pour essayer, mais ce n'est peut etre pas utile
les miniatures sont déjà redimensionnés en strech zoom, et l'image au centre aussi

Si quelqu'un peut me dire ce que j'ai raté, j'ai quand même l'impression que c'est un peu tordu ce css même si je dois l'avouer ca a l'air assez puissant (le redimensionnement du navigateur ne change pas la structure de l'affichage).

Merci.

**Bovino** · 07/04/2015, 16h59

Code :

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

position: center;

après des jours de tutos

J'ai franchement un peu de mal à croire que tu aies vu ça dans un quelconque tuto...

Comment centrer horizontalement n'importe quel élément en CSS ?

Glossaire des propriétés CSS.

**Pol63** · 07/04/2015, 17h03

position:center visual studio 2013 me le propose, je l'ai testé

sinon j'avais compris que quand il y a auto sur les marges gauche et droite ca centre, mais ce n'est pas le cas avec mon code

**NoSmoking** · 09/04/2015, 00h20

Bonjour,
as tu essayé de partir sur une base simple

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>3 colonnes</title>
<style>
html, body {
  margin:0;
  height:100%;
}
div{
  height:100%;
  float:left;
  width:80%;
  background:#bcd;
}
#gauche,
#droite {
  width:10%;
  background:#abc;
}
</style>
</head>
<body>
  <div id="gauche"></div>
  <div id="centre"></div>
  <div id="droite"></div>
</body>
</html>

sinon regarde du coté des flex-box

Redécouvrez la mise en page avec Flexbox.

PS : je rajoutes Les flexBox, une approche simple..., que je viens de retrouver.

**Pol63** · 09/04/2015, 00h46

j'ai à peu près réussi à centrer (enfin horizontalement, mais un peu moins verticalement

)
par contre ce système de flex, c'est bien cool, je cherchais comment faire ca facilement (venant de technos client lourd comme wpf ou le layout se fait de manière simple et intuitive)

je vais passer en résolu quand même, merci bien

il me reste plus qu'à trouver comment mettre un element sur un element, à priori z-index devrait me convenir

Centrage difficile [Débutant(e)]

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager