【发布时间】：2017-02-08 06:49:15
【问题描述】：
我目前正忙于构建网站和创建响应式设计。但是现在我在这个设计中有几个表添加了 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;
}
}
【问题讨论】：
-
嗯.....你试过
margin: 0 auto;了吗？ -
以我为中心 -- codepen.io/sol_b/pen/MJqeqq
-
是的...但是不起作用...
-
好的...但是您提供的工作正常。能否提供更多代码？
-
在您发送给我的 codepen 部分中，它也不起作用...当您缩小屏幕（宽度）时，它会向左对齐...
标签： html css alignment center responsive