我试图水平对齐我的桌子,但似乎无法做到这一点。我以前做的没问题,但是我不知道为什么现在不起作用。桌子只留在同一个地方。
<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;
}
感谢您的帮助
答案 0 :(得分:0)
您只需要从表类中删除display: block;
。