0
これが可能かどうかは確かではありませんが、2つのテーブル行の中央にボタンを配置することは可能です。たとえば、私は、次の表があります： "！MEを養う"2つのテーブル行の間にボタンを配置する
/*MAIN CONTAINER*/
div#products_box{
padding: 0;
margin: 0;
width: 70%;
margin: auto;
border: 2px solid #cccccb;
height: 130px;
border-top: 6px solid #ed1c24;
margin-top: 100px;
margin-bottom: 30px;
}
/*div#products{
padding-left: 20px;
padding-right: 20px;
}*/
button#feed{
text-transform: uppercase;
color:#e86065;
background-color: white;
border: 1px solid #e86065;
border-radius: 5px;
float:right;
padding-right: 10px;
width: 150px;
font-size: 1.5em;
}
/*TABLE*/
table{
width:100%;
margin-top: 6px;
border-collapse: collapse; /* no border */
margin-bottom: 10px;
}
td.avg{
text-align: center;
}
/*products button*/
td#button{
margin-top: 20px !important;
height: 50px;
}
h3#rest_name{
color: #e86065;
font-weight: bold;
font-size: 1.2em;
margin-left: 20px;
}
p#addr{
padding:0;
margin: 0;
font-size: 0.9em;
color: #818284;
margin-left: 20px;
margin-bottom: 20px;
}
p.title{
text-transform: uppercase;
color: #000;
font-size: 0.7em;
font-weight: bold;
}
p.rest{
font-size: 0.8em;
color: #818284;
margin-bottom: 20px;
}
td#review{
float:left;
}
/*Red bottom border*/
tr#bottom,th{
padding: 0;
margin: 0;
background: #e86065;
width: 100%;
border: 1px solid #e86065;
height: 40px;
}
/*review button*/
button#review_butt{
float:left;
color: white;
text-transform: uppercase;
background-color:#e86065;
border: 1px solid #e86065;
font-size: 0.8em;
}
tr.float{
margin-left: 20px;
}
td.float{
margin-left: 20px;
}<div id='products_box'>
<div id='products'>
<table>
<tr class='float'>
<td class='float'><h3 id='rest_name'>$rest_name </h3> </td>
<td class='float'><p class='title'> Price</p></td>
<td class='avg'><p class='title'>Avg Delivery</p></td>
<td><p class='title'>Cost</p></td>
<td></td>
<td id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>
</tr>
<tr class='float'>
<td><p id='addr'>$rest_add, $rest_city</p></td>
<td></td>
<td class='avg'><p class='rest'>$rest_avg mins</p></td>
<td></td>
</tr>
<div id='cuisine'>
<br>
<tr id='bottom'>
<td id='review'><a href='review.php'><button id='review_butt'>View Reviews!</button></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><img src='Images/Chef_hat.png' alt='Cuisine' style='width:40px;height:40px;'></td>
<td>$rest_cat</td>
</tr>
</div>
</table>
</div>
</div>が、私は希望しますそのようなテーブルの行の中央にセンタリングされるボタン：
が遠すぎるフェッチこのですか、それは働くことができますか？
空の「」を取り除いて、テーブル行の最後の行を2の幅にするのはなぜですか？次に、 '
テーブルベースのレイアウトを使用しないでください – user2182349
@Zze最終的に空のに何かが入りますが、現時点ではプレースホルダです。そして、あなたが二重の幅を持つことができるかどうか分からなかったことに感謝します – jerneva