blocks|key|647828|text|最简单的方法是同时使用line-height和height+CSS属性。只需给文本输入一个与其height值相同的line-height即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|647829|顺便说一句，在我看来，你的实时站点在chrome+16下看起来没问题。|647830|​|647831|📷|atomic|647832|647833|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/462245933f7414d955373d1691f7fbcc.png|imageAlt^0|B|B|N|6|1B|6|1L|B|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|M|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U|V|-4]]]]

The easiest way is to use both the <code>line-height</code> and <code>height</code> CSS properties. Just give the text input a <code>line-height</code> with the same value as its <code>height</code>.

By the way, your live site looks okay to me in chrome 16.

<img src="https://i.stack.imgur.com/HTda8.png" alt="enter image description here">

blocks|key|433587|text|对我来说很好用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|433588|<input+type="text"+name="first_name"+placeholder="Search"+style="height:+50px;">|code-block|syntax|javascript|433589|​|433590|📷|atomic|offset|length|433591|433592|尝试更改此设置：|433593|#register-block-fields+input+{
width:+230px;
height:+41px;
padding-left:+40px;
padding-right:+20px;
height:+41px;+//+Changed+from+line-height
color:+#878787;
font-size:+12px;
font-family:+Arial,+Helvetica,+sans-serif;
background:+none;
}|433594|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/442a81dc23995d5ebe0e4d1c3c7de2cb.png|imageAlt^0|0|0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|14|8|@]|9|@$L|15|M|16|1|17]]|A|$]]|$1|N|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

Works fine for me:

<pre><code>&lt;input type="text" name="first_name" placeholder="Search" style="height: 50px;"&gt;
</code></pre>

<img src="https://i.stack.imgur.com/7xNs7.png" alt="enter image description here">

Try changing this:

<pre><code>#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}
</code></pre>

blocks|key|433657|text|也有这个bug。在ems中设置行高为我解决了这个问题。它在Chrome，Safari(桌面和iOS)和火狐上看起来都是一样的。并且我添加了一个在IE中获得垂直居中的技巧。这是我的css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|433658|height:+36px;+++++++
line-height:+1.2em;
line-height:+26px\9;+/*for+IE+*/|code-block|syntax|javascript|433659|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Had this bug too. Setting line-height in ems fixed this for me. It looks the same in Chrome, Safari(desktop and iOS) and Firefox. and I added a \9 trick to get vertical centering in IE. here's my css

<pre><code>height: 36px; 
line-height: 1.2em;
line-height: 26px\9; /*for IE */
</code></pre>

blocks|key|433685|text|对我来说，最好的解决方案是在IE8中使用line-height:normal和hack。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|433686|<input+type="text"+name="test_name"+placeholder="Search">


input+{
++++height:+35px;
++++line-height:+normal;
++++line-height:+32px\0/;+/*+for+IE+8+*/
}|code-block|syntax|javascript|433687|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For me the best solution is to use line-height:normal and hack for IE 8.

<pre><code>&lt;input type="text" name="test_name" placeholder="Search"&gt;


input {
 height: 35px;
 line-height: normal;
 line-height: 32px\0/; /* for IE 8 */
}
</code></pre>

blocks|key|433730|text|对我来说，这很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|433731|line-height:+inherit;|code-block|syntax|javascript|433732|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For me this worked well:

<pre><code>line-height: inherit;
</code></pre>

blocks|key|433763|text|其他答案对我来说都不起作用，可能是因为我的输入元素在flex框中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|433764|我最终需要指定一个px格式的行高，与输入元素的默认值相比，行高的值要大一些。|433765|input[type="text"]+{+line-height:+32px;+}|code-block|syntax|javascript|433766|感觉像个黑客，但这是我唯一能去上班的东西。|433767|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

None of the other answers worked for me, maybe because my input element is inside a flex box.
I ended up needing to specify a line-height in px - with a large value for the line-height compared with the default for input elements.
<pre><code>input[type=&quot;text&quot;] { line-height: 32px; }
</code></pre>
Feels like a hack, but it's the only thing I could get to work.

Do you have any idea on how to get the placeholder attribute to vertically center in safari? 
Though when you start typing, the text is perfectly centred.

Placeholder text is not vertically centered in Safari

你知道如何在safari中将占位符属性设置为垂直居中吗？不过，当你开始打字的时候，文本是完全居中的。

问占位符文本在Safari中不垂直居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问占位符文本在Safari中不垂直居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问占位符文本在Safari中不垂直居中
EN