0
私は現在、ウェブサイトの構築とレスポンシブなデザインの作成に忙しいです。しかし今、私はこのデザインにいくつかのテーブルを追加しました.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;
}
}
、応答性のレイアウトにCSSでグリッドを行う方が良いでしょう：0自動;'まだ？ – NathanielSantley
私のために集中 - http://codepen.io/sol_b/pen/MJqeqq – sol
はい...しかし、動作しません... – Niels