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

你应该使用＆＃34; text-align：center;＆＃34;风格（我不知道你的代码的其余部分）或包含你的表的（宽度：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>

响应式网站中的中心表

2 个答案: