在 div 中居中文本并使 table 响应

Question

我的代码有两个困难，在此先感谢可以帮助我的人。我想将我的文本置于灰色背景中。我通过添加这行代码实现了放在中间：

line-height: 90px;
  text-align: center;

但是当我这样做时，div 中的某些文本部分消失了，我不知道为什么。另外我想得到建议，因为我想让这个 table 响应。我的目标是每个单元格都充当一个块并一个一个地放在另一个单元格下，但我不确定是否可以使用我的实际代码。

table{
    table-layout: fixed;
    width: 100%;
  font-family: 'Varela Round';
}

th, td {
  overflow:hidden;
  font-family: 'Varela Round';
  width:100%;
}

th{line-height:3;}
td{line-height:1.4;}

#base{background-color:#07183D;color:white;font-family: 'Varela Round';}
#intermediaire{background-color:#8A012C;color:white;font-family: 'Varela Round';}
#avance{background-color:#022C8A;color:white;font-family: 'Varela Round';}
#complet{background-color:#3B570A;color:white;font-family: 'Varela Round';}

.title600{font-size:18px; letter-spacing:1.5px;}

<table>
   <tr>
      <th><center><div id="base" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="title600">BASE</h2>
        </div></center></th>
      <th><center><div id="intermediaire" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="title600">INTERMÉDIAIRE</h2>
        </div></center></th>
      <th><center><div id="avance" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="title600">AVANCÉ</h2>
        </div></center></th>
      <th><center><div id="complet" style="z-index: 1000; width: 258px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="title600">COMPLET</h2>
        </div></center></th>
   </tr>
   <tr>
      <td><center><div style="width:258px;text-align:justify;font-size: 12px">Cette formule vous permet de connaître les entreprises présentes sur ce territoire et de le valider </div></center></td>
     <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td>
     <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td>
     <td><center><div style="width:258px;text-align:justify;font-size: 12px">texte</center></td>
   </tr>
   <tr>
     <td><center><div style="width:258px;height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des sociétés</div></center></td>
     <td><center><div style="width:258px; height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des société + les contacts</div></center></td>
     <td><center><div style="width:258px; height:100px;text-align:justify;background:grey;
 ;"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs</div></center></td>
     <td><center><div style="width:258px; height:100px;text-align:justify;background:grey;"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs + les lignes directes (fixes et/ou mobiles)</div></center></td>
   </tr></table>

Answer 1

您在 td 上设置了内联样式，最好将样式添加到样式中 sheet，这样可以更容易地查看样式的来源。

对于响应式元素，使用 CSS @media 查询。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

body{
 font-family: 'Varela Round';
} 
 table {
     width: 100%;
}
th{
 line-height:3;
 text-align: center;
}
th div {
   max-width: 258px;
   margin: 0 auto;
}
td{
 line-height:1.4;
 text-align: center;
}
td div {
  max-width: 258px;
  margin: 0 auto;
}
#base{
 background-color:
 #07183D;
 color:white;
}
#intermediaire{
 background-color:#8A012C;color:white;
}
#avance{
 background-color:#022C8A;
 color:white;
}
#complet{
 background-color:#3B570A;
 color:white;
}
.title600{
 font-size:18px; 
 letter-spacing:1.5px;
}
.grey {
    background: #CCC;
    max-width: 258px;
    margin: 0 auto;
}
@media only screen and (max-width: 500px) {
 th,td,tr{
  width: 100%;
  display: block;
 }
  
}

<table>
   <tr>
      <th><div id="base">
        <h2 class="title600">BASE</h2>
        </div></th>
      <th><div id="intermediaire">
        <h2 class="title600">INTERMÉDIAIRE</h2>
        </div></th>
      <th><div id="avance">
        <h2 class="title600">AVANCÉ</h2>
        </div></th>
      <th><div id="complet"">
        <h2 class="title600">COMPLET</h2>
        </div></th>
   </tr>
   <tr>
      <td><div>Cette formule vous permet de connaître les entreprises présentes sur ce territoire et de le valider </div></td>
     <td><div>texte</div></td>
     <td><div>texte</div></td>
     <td><div>texte</div></td>
   </tr>
   <tr>
     <td><div class="grey"><b>Inclut</b>: la liste des sociétés</div></td>
     <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts</div></td>
     <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs</div></td>
     <td><div class="grey"><b>Inclut</b>: la liste des société + les contacts + les mails nominatifs + les lignes directes (fixes et/ou mobiles)</div></td>
   </tr></table>

在 div 中居中文本并使 table 响应

Center a text in a div and make the table responsive

html

html-table

valign

responsive-design