반응 형 웹 사이트의 센터 테이블

Question

저는 현재 웹 사이트를 구축하고 반응 형 디자인을 개발 중입니다. 하지만 지금은이 디자인에 여러 테이블을 가지고 CSS display:block;을 추가했습니다. 그러나 이제는 반응이 빠른 디자인에서 왼쪽으로 정렬됩니다. 그러나 나는 그것이 중심에 정렬되기를 원한다. 그러나 text-align:center; 또는 margin:auto;을 추가하면 작동하지 않습니다. 무엇을 더 시도 할 수 있습니까?

코드 :

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

당신은 사용해야

"텍스트 정렬 : 센터;" 스타일로 (나는 나머지 코드가 무엇인지 모른다) 또는 테이블을 포함하고있는 (너비 : 100 %).

Answer 2

그것은 반응 레이아웃 CSS로 그리드를 수행하는 것이 좋습니다, 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>