如何對齊div中間的輸入元素？

對於下面的HTML代碼，如何對齊div中間的輸入元素？

.shoppingform { 
 
    width: 400px; 
 
    height: 800px; 
 
    background: #7CB9E8; 
 
    /* url(some img)*/ 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    color: white; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    border-radius: 5px; 
 
} 
 
.customername { 
 
    border: 1px solid white; 
 
    color: black; 
 
    font-weight: normal; 
 
    padding: 10px 2px 5px 5px; 
 
    background: #B284BE; 
 
    width: 90%; 
 
    border-radius: 5px; 
 
} 
 
.customername { 
 
    height: 5%; 
 
} 
 
.customername { 
 
    margin-top: 5px; 
 
} 
 
.shoppingform > div > input { 
 
    border-radius: 5px; 
 
    width: 60%; 
 
} 
 
.formlabel { 
 
    display: inline-block; 
 
    width: 30%; 
 
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data"> 
 
    Step1: Your details 
 
    <br> 
 
    <div class="customername"> 
 
    <label class="formlabel">Name:</label> 
 
    <input type="text"> 
 
    </div> 
 
</form>

有多種div元素（如customername），其上面的代碼不具有，爲了使問題簡單。

label和input文字朝向div容器的正面。

如何垂直對齊div容器中的label和input文本？要添加，表單中有多個div元素。

來源

2015-11-24 overexchange

給你.customername元件自動的保證金。 – VikingBlooded

你想垂直對齊，而不是水平的權利？ – AtheistP3ace

@ AtheistP3ace是垂直對齊 – overexchange

.shoppingform { 
 
    width: 400px; 
 
    height: 800px; 
 
    background: #7CB9E8; 
 
    padding-left: 15px; 
 
    color: white; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    border-radius: 5px; 
 
    padding-top: 47.5%; 
 
} 
 
.customername { 
 
    margin: auto; 
 
    border: 1px solid white; 
 
    color: black; 
 
    font-weight: normal; 
 
    padding: 10px 2px 5px 5px; 
 
    background: #B284BE; 
 
    width: 90%; 
 
    border-radius: 5px; 
 
    height: 5%; 
 
    margin-top: 5px; 
 
} 
 
.shoppingform > div > input { 
 
    border-radius: 5px; 
 
    width: 60%; 
 
} 
 
.formlabel { 
 
    display: inline-block; 
 
    width: 30%; 
 
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data"> 
 
    Step1: Your details 
 
    <br> 
 
    <div class="customername"> 
 
    <label class="formlabel">Name:</label> 
 
    <input type="text"> 
 
    </div> 
 
</form>

來源

2015-11-24 15:13:45

修改你的代碼一點點讓你的元素垂直對齊的建議。

不過，我建議你考慮一下你的元素定位，這種形式在響應行爲和佈局方面可能不會很好。

.shoppingform { 
 
    width: 400px; 
 
    height: 800px; 
 
    background: #7CB9E8; 
 
    /* url(some img)*/ 
 
    padding-left: 15px; 
 
    padding-top: 10px; 
 
    color: white; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
.customername { 
 
    border: 1px solid white; 
 
    color: black; 
 
    font-weight: normal; 
 
    padding: 10px 2px 5px 5px; 
 
    background: #B284BE; 
 
    width: 90%; 
 
    border-radius: 5px; 
 
} 
 
.customername { 
 
    height: 5%; 
 
} 
 
.customername { 
 
    margin-top: 5px; 
 
} 
 
.shoppingform > div > input { 
 
    border-radius: 5px; 
 
    width: 60%; 
 
} 
 
.formlabel { 
 
    display: inline-block; 
 
    width: 30%; 
 
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data"> 
 
    Step1: Your details 
 
    <br/> 
 
    <div class="customername"> 
 
    <label class="formlabel">Name:</label> 
 
    <br/> 
 
    <input type="text"> 
 
    </div> 
 
</form>

來源

2015-11-24 15:20:30 AGE

如何對齊div中間的輸入元素？

回答

相關問題