如何對齊垂直居中的輸入字段？

下面是HTML：如何對齊垂直居中的輸入字段？

<header> 
    <div class="image"> 
     <img class="logo" src="https://www.gravatar.com/avatar/b637dcf2d1f68517a316c466585ea1a8?s=32&d=identicon&r=PG&f=1" /> 
    </div> 
    <div class="form"> 
     <input type="text" class="input" name="location" id="location" /> 
    </div> 
</header>

這裏是CSS：

.image { 
    float:left; 
} 
img { 
    width: 100px; 
    height: 100px; 
} 
.form { 
    vertical-align: middle; 
}

這裏是的jsfiddle鏈接： http://jsfiddle.net/NmP69/1/

來源

2014-02-10 Manish Gupta

提供HTML代碼用的jsfiddle鏈接。 – Nitesh

當你使用'vertical-align'時爲''form'提供一個高度像這樣：http://jsfiddle.net/QraX6/ –

在這裏你去。

WORKING DEMO

CSS的變化：

.form { 
    vertical-align: middle; 
    display:table-cell; 
} 

header { 
    display: table; 
}

希望這有助於。

來源

2014-02-10 12:33:27 Nitesh

我會欣賞downvote的原因。 – Nitesh

謝謝Nathan Lee。它工作得很好，因爲我想要的。你們好棒！！！再次感謝。 –

不客氣:) - @ManishGupta – Nitesh

一個這樣做的可能的方式是使用位置絕對和負利潤率在圖像上：

img { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
}

在這裏看到的結果： http://jsfiddle.net/WHSKL/

來源

2014-02-10 12:42:24 j3r6me

如何對齊垂直居中的輸入字段？

回答

相關問題