表在中间

Question

我需要在页面中间放置一个表格，但是我的表格内容就像在图片上一样。

[编辑]：对不起，我忘记说只是响应的tabke搞砸了你可以在edastehlik.wz.cz视口上查看它：500 - 1050

但我需要这样：

.tabulkaodesilac {
  width: 100%;
  margin-left: 400px;
  display: block;
}

#jmeno,
#e-mail,
#spam,
#predmet {
  border-radius: 50px;
  background: rgba(141, 109, 182, 0.75);
  width: 350px;
  height: 25px;
  font-family: Calibri;
  font-size: 16px;
  color: white;
  padding: 0 10px;
  border-style: none;
}

@media screen and (max-width: 1050px) {
  .tabulkaodesilac {
    padding: 0px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  #jmeno,
  #e-mail,
  #spam,
  #predmet {
    width: 70%;
    font-family: verdana;
    margin-left: 10px;
    display: block;
    margin: 0 auto;
  }
}

<table class="tabulkaodesilac">
  <tr>
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td>
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td>
  </tr>
  <tr>
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td>
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td>
  </tr>
</table>

Answer 1

您的表格有margin-left: 400px;和display: block; - 尤其是display: block;实际上阻止它成为一个表格（表格必须有display: table） - 所以只需删除它（而且余量太大了）它会起作用：

＆＃13;

＆＃13;

.tabulkaodesilac {
  width: 100%;
}

#jmeno,
#e-mail,
#spam,
#predmet {
  border-radius: 50px;
  background: rgba(141, 109, 182, 0.75);
  width: 350px;
  height: 25px;
  font-family: Calibri;
  font-size: 16px;
  color: white;
  padding: 0 10px;
  border-style: none;
}

@media screen and (max-width: 1050px) {
  .tabulkaodesilac {
    padding: 0px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  #jmeno,
  #e-mail,
  #spam,
  #predmet {
    width: 70%;
    font-family: verdana;
    margin-left: 10px;
    display: block;
    margin: 0 auto;
  }
}

＆＃13;

<table class="tabulkaodesilac">
  <tr>
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td>
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td>
  </tr>
  <tr>
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td>
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为表格指定margin: 0 auto并从中删除其他内容：

＆＃13;

＆＃13;

.tabulkaodesilac {
  margin: 0 auto;
}

#jmeno,
#e-mail,
#spam,
#predmet {
  border-radius: 50px;
  background: rgba(141, 109, 182, 0.75);
  width: 350px;
  height: 25px;
  font-family: Calibri;
  font-size: 16px;
  color: white;
  padding: 0 10px;
  border-style: none;
}

@media screen and (max-width: 1050px) {
  .tabulkaodesilac {
    padding: 0px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  #jmeno,
  #e-mail,
  #spam,
  #predmet {
    width: 70%;
    font-family: verdana;
    margin-left: 10px;
    display: block;
    margin: 0 auto;
  }
}

＆＃13;

<table class="tabulkaodesilac">
  <tr>
    <td><input id="jmeno" type="text" name="jmeno" placeholder="Vaše Jméno" /> <br></td>
    <td><input id="e-mail" type="email" name="email" placeholder="Váš E-mail" /><br></td>
  </tr>
  <tr>
    <td><input id="spam" type="text" name="spam" placeholder="Zadejte aktuální rok" /><br></td>
    <td><input id="predmet" type="text" name="predmet" placeholder="Předmět" /> <br></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;