Aligner trois boutons dans un formulaire

Question

J'essaie d'aligner trois boutons à l'intérieur d'un formulaire, mais le bouton central est toujours fixé en bas.

jsfiddle sketch

--- 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; 
} 

Je remarqué aussi que l'ouverture de la page de Mozilla , le bouton central semble être fixé en haut.

Answer 1

Vous pouvez faire la forme d'un 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>

Answer 2

utilisation Vertical-align:middle; propriété

Essayez cette

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

Link for Reference

Answer 3

Vous pouvez créer une table:

<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>