blocks|key|4426320|text|这适用于最新的Firefox，IE/Edge，Chrome的纯CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4426321|textarea+{+
++++width:+440px;
++++height:600px;+/*+Note+this+is+the+same+height+as+the+placeholders+line-height+*/
}

::-moz-placeholder+{+/*+Mozilla+Firefox+19%2B+*/
++++line-height:600px;
}
::-webkit-input-placeholder+{+/*+Webkit+*/
++++line-height:600px;
}
:-ms-input-placeholder+{+/*+IE+*/
++++line-height:600px;
}|code-block|syntax|javascript|4426322|请参阅此fiddle。关键是将文本区域的height设置为与占位符相同的line-height。|offset|length|style|CODE|4426323|遗憾的是，vertical-align:+middle;似乎还没有得到支持。|4426324|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/ndou226o/^0|0|0|K|6|10|B|4|6|0|0|5|N|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@$I|17|J|18|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>This works for latest Firefox, IE/Edge, Chrome in pure CSS:</p>

<pre><code>textarea { 
    width: 440px;
    height:600px; /* Note this is the same height as the placeholders line-height */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
    line-height:600px;
}
:-ms-input-placeholder { /* IE */
    line-height:600px;
}
</code></pre>

<p>See this <a href="https://jsfiddle.net/ndou226o/" rel="noreferrer">fiddle</a>. The key is to set the <code>height</code> of the textarea to the same <code>line-height</code> as the placeholder.</p>

<p>Sadly <code>vertical-align: middle;</code> seems not to be supported yet.</p>


blocks|key|4426380|text|您最好的选择是使用padding，因为line+height不能在多条线路上工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4426381|此外，在计算填充时，请确保将行高/字体大小考虑在内。|4426382|entityMap^0|9|7|J|B|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>Your best bet is to use <code>padding</code>, as <code>line height</code> will not work over multiple lines.</p>

<p>Additionally, make sure to take into account the line height / font size when calculating your padding. </p>


blocks|key|4426385|text|.textbox1+{+
++++width:+440px;
++++height:70px
}

::-webkit-input-placeholder+{+/*+Chrome/Opera/Safari+*/
+++line-height:70px;
+++text-align:+center;+
}

:-moz-placeholder+{+/*+Firefox+18-+*/
+++line-height:70px;
+++text-align:+center;+
}

::-moz-placeholder+{+/*+Firefox+19%2B+*/
+++line-height:70px;
+++text-align:+center;+
}

:-ms-input-placeholder+{+/*+IE+10%2B+*/
+++line-height:70px;
+++text-align:+center;+
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4426386|你可以在这里查看CSS+jsfiddle|unstyled|offset|length|4426387|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/igweze/m750vqLu/6/^0|0|8|C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>.textbox1 { 
    width: 440px;
    height:70px
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   line-height:70px;
   text-align: center; 
}

:-moz-placeholder { /* Firefox 18- */
   line-height:70px;
   text-align: center; 
}

::-moz-placeholder { /* Firefox 19+ */
   line-height:70px;
   text-align: center; 
}

:-ms-input-placeholder { /* IE 10+ */
   line-height:70px;
   text-align: center; 
}
</code></pre>
<p>You can check here <a href="https://jsfiddle.net/igweze/m750vqLu/6/" rel="nofollow noreferrer">CSS jsfiddle</a></p>


blocks|key|4426423|text|使用line-height属性使占位符垂直居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4426424|entityMap^0|2|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use the <code>line-height</code> property to make the placeholder vertically centered.</p>


blocks|key|4426432|text|作为替代解决方案-您可以将行设置为奇数，然后在换行符中添加向下舍入的一半行，以将占位符放在中间……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4426433|​|4426434|.textbox1+{+
++width:+440px;
}|code-block|syntax|javascript|4426435|<textarea+class="textbox1"name="mytextarea"placeholder="&#10;Name"+rows=3></textarea>|4426436|4426437|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Just as an alternate solution - you could set the rows to an odd number and add half the rows rounded down in line feed characters to put the placeholder in the middle...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.textbox1 { 
  width: 440px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea class="textbox1"name="mytextarea"placeholder="&amp;#10;Name" rows=3&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4426468|text|<textarea+name="example"+onFocus={onFocus}+onBlur={outFocus}+/>
<label+className={styles.Teaxarea_label}>Label</label>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4426469|然后你就有了这些函数：|unstyled|4426470|const+outFocus+=+(event)+=>+{
++++if+(event.target.value+!==+'')+{
++++++event.target.nextSibling.style+=+"display:none;"
++++}
++++else+{
++++++event.target.nextSibling.style+=+"display:block;"
++++}
++}
++const+onFocus+=+(event)+=>+{
++++event.target.nextSibling.style+=+"display:none;"
++}|4426471|CSS：|4426472|.Teaxarea_label{
++position:+absolute;
++user-select:+none;
++pointer-events:+none;
++display:+block;
}

textarea+{
++position:+relative;
}|4426473|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>&lt;textarea name=&quot;example&quot; onFocus={onFocus} onBlur={outFocus} /&gt;
&lt;label className={styles.Teaxarea_label}&gt;Label&lt;/label&gt;
</code></pre>
<p>and then you have those functions:</p>
<pre><code>const outFocus = (event) =&gt; {
    if (event.target.value !== '') {
      event.target.nextSibling.style = &quot;display:none;&quot;
    }
    else {
      event.target.nextSibling.style = &quot;display:block;&quot;
    }
  }
  const onFocus = (event) =&gt; {
    event.target.nextSibling.style = &quot;display:none;&quot;
  }
</code></pre>
<p>CSS:</p>
<pre><code>.Teaxarea_label{
  position: absolute;
  user-select: none;
  pointer-events: none;
  display: block;
}

textarea {
  position: relative;
}
</code></pre>


blocks|key|4426490|text|为了改进填充答案，这里有一种方法来保证计算将其居中。这比多行的行高效果更好，但它仍然意味着一旦用户输入了多行文本，现在就会有溢出的滚动，使得居中基本上无用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4426491|.textbox1+{
++--title-modal--textarea--height:+100px;
++/*+font-size+variable+for+calculations+cannot+be+em,+otherwise+calculations+become+doubly-dependent+on+font-size+*/
++--title-modal--textarea--font-size:+1rem;
++--title-modal--textarea--line-height:+1.5;

++height:+var(--title-modal--textarea--height)+!important;
++font-size:+var(--title-modal--textarea--font-size);
++line-height:+var(--title-modal--textarea--line-height);

++padding-top:+calc((var(--title-modal--textarea--height)+-+(var(--title-modal--textarea--line-height)+*+var(--title-modal--textarea--font-size)))/2);

++/*+I+used+these+to+make+sure+the+border+doesn't+take+away+from+the+height,+*/
++/*+affecting+the+padding+calculation,+*/
++/*+but+you+could+similarly+turn+them+into+variables+and+subtract+*/
++border-bottom:+0;
++border-top:+0;
}|code-block|syntax|javascript|4426492|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|$]]

<p>To improve on the padding answers, here is a way to guarantee calculations that center it. This works better than line-height for multiple lines, but it still means that once the user enters multiple lines of text, there will now be overflow to scroll, rendering the centering essentially useless</p>
<pre><code>.textbox1 {
  --title-modal--textarea--height: 100px;
  /* font-size variable for calculations cannot be em, otherwise calculations become doubly-dependent on font-size */
  --title-modal--textarea--font-size: 1rem;
  --title-modal--textarea--line-height: 1.5;

  height: var(--title-modal--textarea--height) !important;
  font-size: var(--title-modal--textarea--font-size);
  line-height: var(--title-modal--textarea--line-height);

  padding-top: calc((var(--title-modal--textarea--height) - (var(--title-modal--textarea--line-height) * var(--title-modal--textarea--font-size)))/2);

  /* I used these to make sure the border doesn't take away from the height, */
  /* affecting the padding calculation, */
  /* but you could similarly turn them into variables and subtract */
  border-bottom: 0;
  border-top: 0;
}
</code></pre>


<p>I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.textbox1 { 
  width: 440px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea class="textbox1"name="mytextarea"placeholder="Name"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


How do I vertically align placeholder text in textarea?

我正在尝试垂直对齐文本区域(文本框)中的占位符文本。我使用文本区域而不是文本输入，因为我需要使用多行。​.textbox1 {   width: 440px;}<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>​

问如何在文本区域中垂直对齐占位符文本？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在文本区域中垂直对齐占位符文本？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在文本区域中垂直对齐占位符文本？
EN