Zentriertabelle in Responsive Website

Question

Ich bin derzeit damit beschäftigt, eine Website zu erstellen und ein responsives Design zu erstellen. Aber jetzt habe ich mehrere Tabellen in diesem Design hinzugefügt die css zu ihnen. Aber jetzt in meinem Responsive Design ist es nach links ausgerichtet. Aber ich möchte, dass es in der Mitte ausgerichtet ist. Aber wenn ich text-align:center; oder margin:auto; hinzufügen, funktioniert es nicht. Was kann ich mehr versuchen?

Code:

HTML:

<table class="kalender"> 
    <tr> 
    <td colspan="3"> 
     <h1>Mei</h1> 
     </td> 
      </tr> 

      <tr> 
      <td> 
      <img src="Kalender/RundUmDenFinanzplatz.png" id="logos" height="150px" alt="Rund um den Finanzplatz" title="Rund um den Finanzplatz"> 
      <h2> 
      Rund um den Finanzplatz Eschborn-Frankfurt 
      </h2> 
       <h4> 
       1 Mei 2017 
       </h4> 
              <div id="flagid"><img src="Flags/germany.png" id="flag" height="15px" alt="Duitsland" title="Duitsland"> 
               <p>GER</p> 
              </div> 
           </td> 
          <td> 
           <img src="Kalender/GiroDItalia.png" id="logos" height="150px" alt="Giro d'Italia" title="Giro d'Italia"> 
            <h2> 
             Giro d'Italia 
            </h2> 
              <h4> 
              5-28 Mei 2017 
             </h4> 
              <div id="flagid"><img src="Flags/italy.svg" id="flag" height="15px" alt="Italië" title="Italië"> 
               <p>ITA</p> 
              </div> 
           </td> 
          <td> 
           <img src="Kalender/TourOfCalifornia.png" id="logos" height="150px" alt="Tour of California" title="Tour of California"> 
            <h2> 
             Amgen Tour of California 
            </h2> 
              <h4> 
              14-20 Mei 2017 
             </h4> 
              <div id="flagid"><img src="Flags/usa.png" id="flag" height="15px" alt="USA" title="USA"> 
               <p>USA</p> 
              </div> 
           </td> 
         </tr> 
       </table> 

CSS:

.kalender { 
    margin: auto; 
    margin-top: 50px; 
    border-top: 2px solid white; 
} 

.kalender h1 { 
    color: #ffffff; 
    font-family: Century Gothic; 
    font-size: 50pt; 
    text-align: center; 
} 

#logos { 
    display: block; 
    margin: auto; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
} 

#logos:hover { 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
} 

.kalender h2 { 
    color: #ffffff; 
    font-family: century Gothic; 
    font-weight: bold; 
    margin-top: 20px; 
    width: 250px; 
    text-align: center; 
} 

.kalender h4 { 
    color: #ffffff; 
    font-family: century Gothic; 
    text-align: center; 
    margin-top: 10px; 
} 

.kalender p { 
    color: #ffffff; 
    font-family: Century Gothic; 
    font-size: 12pt; 
    display: inline; 
} 

#flagid { 
    text-align: center; 
    margin-top: 10px; 
} 

#flagid img { 
    margin-right: 5px; 
} 


@media screen and (max-width: 720px) { 
table, td, tr { 
     display: block; 
    } 

    .kalender td, .kalender tr { 
     margin-top: 0px; 
     margin-bottom: 50px; 
     margin-right: 0px; 
     text-align: center; 
     margin: auto; 

    } 

    .kalender h1 { 
     font-size: 30pt; 
     margin: 0px; 
     text-align: center; 
     width: 100%; 
    } 

    .kalender img { 
     margin: auto; 
     text-align: center; 
    } 

    .kalender { 
    margin: auto; 
    text-align: center; 
    } 
} 

Answer 1

Sie verwenden sollten "text-align: center;" in Stil (ich weiß nicht, was der Rest Ihres Codes ist) oder in (Breite: 100%), die Ihre Tabelle enthalten.

Answer 2

Es ist besser, ein Raster mit CSS für ansprechendes Layout zu tun, here a solution for your code

.kalender { 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    border-top: 2px solid white; 
 

 
} 
 

 
.kalender h1 { 
 
    color: #ffffff; 
 
    font-family: Century Gothic; 
 
    font-size: 50pt; 
 
    text-align: center; 
 
} 
 

 
#logos { 
 
    display: block; 
 
    margin: auto; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=70); 
 
} 
 

 
#logos:hover { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity=100); 
 
} 
 

 
.kalender h2 { 
 
    color: #ffffff; 
 
    font-family: century Gothic; 
 
    font-weight: bold; 
 
    margin-top: 20px; 
 
    width: 250px; 
 
    text-align: center; 
 
} 
 

 
.kalender h4 { 
 
    color: #ffffff; 
 
    font-family: century Gothic; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 

 
.kalender p { 
 
    color: #ffffff; 
 
    font-family: Century Gothic; 
 
    font-size: 12pt; 
 
    display: inline; 
 
} 
 

 
#flagid { 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 

 
#flagid img { 
 
    margin-right: 5px; 
 
} 
 

 

 
@media screen and (max-width: 720px) { 
 
table, td, tr { 
 
     display: block; 
 

 
    } 
 
tr{ 
 
background: #000; 
 
    position: absolute; 
 
    right: 0; 
 
    margin-right: 50%; 
 
    transform: translate(50%); 
 
} 
 
    .kalender td, .kalender tr { 
 
     margin-top: 0px; 
 
     margin-bottom: 50px; 
 
     
 
     text-align: center; 
 
     
 

 
    } 
 

 
    .kalender h1 { 
 
     font-size: 30pt; 
 
     margin: 0px; 
 
     text-align: center; 
 
     width: 100%; 
 
    } 
 

 
    .kalender img { 
 
     margin: auto; 
 
     text-align: center; 
 
    } 
 

 
    .kalender { 
 
    margin: auto; 
 
    text-align: center; 
 
    } 
 
}

<table class="kalender"> 
 
    <tr> 
 
    <td colspan="3"> 
 
     <h1>Mei</h1> 
 
     </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td> 
 
      <img src="Kalender/RundUmDenFinanzplatz.png" id="logos" height="150px" alt="Rund um den Finanzplatz" title="Rund um den Finanzplatz"> 
 
      <h2> 
 
      Rund um den Finanzplatz Eschborn-Frankfurt 
 
      </h2> 
 
       <h4> 
 
       1 Mei 2017 
 
       </h4> 
 
              <div id="flagid"><img src="Flags/germany.png" id="flag" height="15px" alt="Duitsland" title="Duitsland"> 
 
               <p>GER</p> 
 
              </div> 
 
           </td> 
 
          <td> 
 
           <img src="Kalender/GiroDItalia.png" id="logos" height="150px" alt="Giro d'Italia" title="Giro d'Italia"> 
 
            <h2> 
 
             Giro d'Italia 
 
            </h2> 
 
              <h4> 
 
              5-28 Mei 2017 
 
             </h4> 
 
              <div id="flagid"><img src="Flags/italy.svg" id="flag" height="15px" alt="Italië" title="Italië"> 
 
               <p>ITA</p> 
 
              </div> 
 
           </td> 
 
          <td> 
 
           <img src="Kalender/TourOfCalifornia.png" id="logos" height="150px" alt="Tour of California" title="Tour of California"> 
 
            <h2> 
 
             Amgen Tour of California 
 
            </h2> 
 
              <h4> 
 
              14-20 Mei 2017 
 
             </h4> 
 
              <div id="flagid"><img src="Flags/usa.png" id="flag" height="15px" alt="USA" title="USA"> 
 
               <p>USA</p> 
 
              </div> 
 
           </td> 
 
         </tr> 
 
       </table>