將一個表格中的三個按鈕對齊

我試圖對齊表格中的三個按鈕，但中央的一個始終固定在底部。將一個表格中的三個按鈕對齊

--- HTML ---

<form action="view.php" method="GET"> 
    <button class="option delete-option" type="button"></button> 
    <button class="btn" type="submit">59752fbd5f346</button> 
    <button class="option edit-option" type="button"></button> 
</form>

--- CSS ---

.btn { 
    font-family: 'Arima Madurai', cursive; 
    background-color: Transparent; 
    color: black; 
    cursor: pointer; 
    font-size: 16px; 
    max-width: 300px; 
    position: relative; 
    width: 100%; 
    border: 1px solid; 
    overflow: hidden; 
} 
.btn span { 
    font-family: 'Arima Madurai', cursive; 
} 
.btn:after { 
    background: red; 
    content: ""; 
    height: 155px; 
    left: -75px; 
    opacity: .2; 
    position: absolute; 
    top: -50px; 
    -webkit-transform: rotate(35deg); 
    transform: rotate(35deg); 
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1); 
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1); 
    width: 50px; 
    z-index: -10; 
} 

.btn:hover:after { 
    left: 120%; 
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1); 
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1); 
} 

.option{ 
    opacity: 0.5; 
    transition: 200ms; 
    width: 32px; 
    height: 32px; 
    border: 0; 
    position: relative; 
} 

.option:hover{ 
    opacity: 1; 
} 

.delete-option{ 
    background: url("http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png") no-repeat scroll 0 0 transparent; 
} 
.edit-option{ 
    background: url("http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png") no-repeat scroll 0 0 transparent; 
}

我也注意到，在打開頁面從Mozilla的，中央按鈕似乎固定在頂部。

來源

2017-07-24 Filippo Scaramuzza

您可以進行形式實現Flexbox：

form { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 70%; /* just for demo */ 
 
} 
 

 
.delete-option { 
 
    background: url(http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png) no-repeat scroll 0 0 transparent; 
 
} 
 

 
.btn { 
 
    font-family: 'Arima Madurai', cursive; 
 
    background-color: Transparent; 
 
    color: black; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
    max-width: 300px; 
 
    position: relative; 
 
    width: 100%; 
 
    border: 1px solid; 
 
    overflow: hidden; 
 
} 
 

 
.edit-option { 
 
    background: url(http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png) no-repeat scroll 0 0 transparent; 
 
} 
 

 
.option { 
 
    opacity: 0.5; 
 
    transition: 200ms; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 0; 
 
    position: relative; 
 
}

<form action="view.php" method="GET"> 
 
    <button class="option delete-option" type="button"></button> 
 
    <button class="btn" type="submit">59752fbd5f346</button> 
 
    <button class="option edit-option" type="button"></button> 
 
</form>

來源

2017-07-24 07:57:37 Gerard

它的工作原理，謝謝！ –

使用Vertical-align:middle;財產

試試這個

.option,.btn{ 
    vertical-align:middle; 
}

Link for Reference

來源

2017-07-24 07:51:43

已經嘗試過，只能作爲@Gerard說 –

您可以創建一個表：

<table width="900" border="0" align="center" bgcolor="#9ABFFC"> 
    <tr> 
    <td align="right" valign="middle"> 
    <input type="button" value="CANCEL" 
    style="background-color:#003; color:#FFF; font-size:10px; height:20px; width:200px" 
    onclick="window.location.href='../index.php'"> 
    </td> 

    <td align="left" valign="middle"> 
    <input type="submit" value="SUBMIT" 
    style="background-color:#003; color:#FFF; font-size:10px; height:20px; width:200px" /></td> 
    <td align="center" valign="middle"> 
     <input type="button" value="EDIT" 
     style="background-color:#003; color:#FFF; font-size:10px; height:20px; width:200px" 
     onclick="window.location.href='../index.php'"> 
    </td> 
    </tr> 
</table>

來源

2017-07-24 08:13:09

太複雜，已經通過簡單的設置顯示來修復：flex to from –

將一個表格中的三個按鈕對齊

回答

相關問題