Tentative de centrage de l'accueil

code/index.css

@@ -1,12 +1,34 @@
 .all-container {
-    display : flex;
+    margin-left: auto;
-    
+    margin-right: auto;
-    align-items: baseline;
+    align-items: center;
-    width : min-content;
+    }
-    
-    margin: 5px;
-    
 
+.mode-container {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bd {
+  /*
+  border-style: solid;
+  border-width: 5px;*/
+}
+
+.ad { /*
+  border-style: solid;
+  border-width: 5px;
+  border-color: red; */
+  width: min-content;
+  margin-left: auto;
+  margin-right: auto;
+
+}
+
+.z {
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .day   { background: #eee; color: black; }

code/index.php

@@ -10,43 +10,45 @@
     <div class="logo">
         <img src="ress/logo_dark.png" id="logo"/>
         <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
+        
     </div>
     
 </div>
 
 
-<div id="modeSelection">
+<div id="modeSelection" class="mode-container">
-    <ul id="diff" class="all-container">
+    <ul id="diff" class="all-container bd">
         <img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
         <img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
         <img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
     </ul>
-    <ul id="modes" class="all-container">
+    <ul id="modes" class="all-container bd">
         <img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
         <img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
         <img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
     </ul>
-    <ul id="points" class="all-container">
+    <ul id="points" class="all-container ad">
-        <img id="5p" class="button" src="./ress/button_points_5.png"/>
+        <img id="5p" class="button z" src="./ress/button_points_5.png"/>
-        <img id="10p" class="button" src="./ress/button_points_10.png"/>
+        <img id="10p" class="button z" src="./ress/button_points_10.png"/>
-        <img id="15p" class="button" src="./ress/button_points_15.png"/>
+        <img id="15p" class="button z" src="./ress/button_points_15.png"/>
-        <img id="20p" class="button" src="./ress/button_points_20.png"/>
+        <img id="20p" class="button z" src="./ress/button_points_20.png"/>
     </ul>
-    <ul id="temps" class="all-container">
+    <ul id="temps" class="all-container ad">
-        <img id="5m" class="button" src="./ress/button_temps_5.png"/>
+        <img id="5m" class="button z" src="./ress/button_temps_5.png"/>
-        <img id="10m" class="button" src="./ress/button_temps_10.png"/>
+        <img id="10m" class="button z" src="./ress/button_temps_10.png"/>
     </ul>
-    <ul id="survie" class="all-container">
+    <ul id="survie" class="all-container ad">
-        <img id="15s" class="button" src="./ress/button_survie_15.png"/>
+        <img id="15s" class="button z" src="./ress/button_survie_15.png"/>
-        <img id="30s" class="button" src="./ress/button_survie_30.png"/>
+        <img id="30s" class="button z" src="./ress/button_survie_30.png"/>
-        <img id="45s" class="button" src="./ress/button_survie_45.png"/> 
+        <img id="45s" class="button z" src="./ress/button_survie_45.png"/> 
     </ul>
 </div>
     
-
+<div class="ad">
     Pseudo :
     <input type="text" id="field_pseudo" />
-<ul>
+</div>
+<ul class="ad">
     <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
     <img id="btn_play_des" src="ress/button_play_desac.png"/>
     <img id="btn_high" src="ress/button_highscores.png" onClick="goHigh()"/>