Question

我试图水平对齐我的桌子，但似乎无法做到这一点。我以前做的没问题，但是我不知道为什么现在不起作用。桌子只留在同一个地方。

<div class="SearchBox">
      <div id="map"></div>
      <form action="{{ url_for('search') }}" method="post" class="DestinationSearch" id="search">
        <i class='fas fa-arrow-left arrow' id="arrow" onclick="location.href='http://127.0.0.1:5000/Drunkfy/Home'"></i>
        <i class='fas fa-car car'></i>
        <i class='fas fa-house-user house'></i>
        <i class='fas fa-long-arrow-alt-down vertical' style='font-size:24px'></i>
        <input type="text" id="origin-input" class="boxes"  placeholder="Pickup Location" value="Current location" title="Choose your pickup location"><br><br>
        <input type="text" id="destination-input" class="boxes" placeholder="Destination" title="Choose your destination"><br><br>
        <button type="submit" disabled style="display: none" aria-hidden="true"></button>
        <input id="searchbtn" type="submit" value="Search">
      </form>
        <table id="DriversAvailable">
             <tr>
                 <th></th>
             </tr>
             <tr id="cars">
                <td>hh</td>
             </tr>
        </table>
    </div>

这是CSS：

.DestinationSearch {
      position:relative;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #ccc;
      padding-top: 20px;
      background-color: rgb(70, 144, 255);
      font-size: 16px;
      height: 25%;
      width: 100%;
    }
#map {
  position:absolute;
  top:180px;
  height: 76%;
  width: 100%;
  margin:0;
}

table {
      display:block;
      width:100%
      border-collapse: collapse;
      margin-left:auto;
      margin-right:auto;
      text-align: center;
    }

感谢您的帮助

Answer 1

您只需要从表类中删除display: block;。

右边距：自动；左边距：自动不起作用

1 个答案: