如何讓我的文本框在觸發後正確對齊？ - jQuery的/ CSS

Question

您可以在這裏看到的實現：http://jsfiddle.net/CtLpz/3/

基本上我想發生什麼事是，當你在中間點擊圖片（在從BOX1例如「添加客戶端」），你看在虛線面板中間的文本框（類似於圖像被點擊之前的方式）。

所有其他箱子也應該發生同樣的情況。

謝謝。

Answer 1

您的樣式表使用margin-top來調整圖像的位置。如果您將這些圖像和文本放置在塊元素中，例如div，那麼您可以在jQuery代碼中替換此元素的內容，並且新內容的樣式將類似。這是一個工作版本：http://jsfiddle.net/treyh/AjycL/

---

HTML之前

<img src="images/add-client-head-icon.png" /><br /> 
Add Client 

HTML後

<div class='middle'> 
    <img src="images/add-client-head-icon.png" /><br /> 
    Add Client 
</div> 

---

的JavaScript之前

$(this).children().html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>"); 

JavaScript之後

$(this).find('.middle').html("Enter Client Name <input type='text' /><br /><input type='submit' value='Submit'/>"); 

---

CSS之前

#add-client .dashed-panel img { 
    margin-top: 20%; 
} 

CSS後

#add-client .dashed-panel .middle { 
    margin-top: 20%;  
}