我正在制作一個應用程式。在這里我有一個輸入框和一個按鈕。我想把它放在中心。我嘗試使用center
標簽,它不起作用。我嘗試使用align-items:center
仍然沒有作業。這該怎么做 ???這是我的程式 -
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
padding: 10px;
background: transparent;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 20px;
background: transparent;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
color: white;
cursor: pointer;
}
<form class="form-inline" action="/">
<input id="email" placeholder="Enter email" name="email" />
<button type="submit">Submit</button>
</form>
如何實作這個???請幫忙
uj5u.com熱心網友回復:
**justify-content: center;**
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
uj5u.com熱心網友回復:
.formContainer {
display: block;
text-align: center;
}
.form-inline {
display: inline-flex;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
padding: 10px;
background: transparent;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 20px;
background: transparent;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
color: white;
cursor: pointer;
}
<div class="formContainer">
<form class="form-inline" action="/">
<input id="email" placeholder="Enter email" name="email" />
<button type="submit">Submit</button>
</form>
</div>
uj5u.com熱心網友回復:
form {
display: flex;
justify-content: center;
align-items: center;
/* Use this line if you have to add multiple elements */
flex-direction: column;
}
<form class="form-inline" action="/">
<div class="input-field">
<input id="email" placeholder="Enter email" name="email" />
<button type="submit">Submit</button>
</div>
</form>
uj5u.com熱心網友回復:
使用justify-content: center;
將其與中心對齊
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
padding: 10px;
background: transparent;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 20px;
background: transparent;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
color: black;
cursor: pointer;
}
<form class="form-inline" action="/">
<input id="email" placeholder="Enter email" name="email" />
<button type="submit">Submit</button>
</form>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/477735.html