Justify and Center text HTML/CSS?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-08-20T19:41:17.597" class="fromnow">Aug 20 '14 at 19:41</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-07-27T09:41:45.150" datetime="2022-07-27T09:41:45.150">Jul 27 '22 at 09:41</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 57,342 times"> <span class="fc-light mr2">Viewed</span> 5.7k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="25413143" data-ownerid="3961689" data-score="9"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="25413143"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="9">9</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a textarea and I want it to be justified so all the lines are equal in width and to be centered to the text stays in the middle of the textarea when it's not at maximum line length.</p> <p>This is my textarea:</p> <pre><code><textarea class="Whiteboard" type="text" placeholder="Type something..."></textarea> </code></pre> <p>...and the CSS:</p> <pre><code>textarea.Whiteboard{ resize: none; background-color: #F1F1F1; border: none; height: 500px; width: 800px; text-align: center; font-size: 50px; } </code></pre> <p>Thank you all!</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/center" class="post-tag js-gps-track" title="show questions tagged 'center'" rel="tag">center</a> <a href="../../questions/tagged/justify" class="post-tag js-gps-track" title="show questions tagged 'justify'" rel="tag">justify</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 20 '14 at 19:41">asked Aug 20 '14 at 19:41</time> <a href="../../users/3961689/james-hewitt" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3961689.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="James Hewitt" /> </a> <div class="s-user-card--info"> <a href="../../users/3961689/james-hewitt" class="s-user-card--link">James Hewitt</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">101</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badge">1</li> <li class="s-award-bling s-award-blingbronze" title="4 bronze badge">4</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-25413143" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="25413143" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-39642089" class="comment js-comment " data-comment-id="39642089" data-comment-owner-id="3170478" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642089_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Have you tried `text-align: justify;` ??</span> – <a href="../../users/3170478/lcsalazar" title="16,524 reputation" class="comment-user ">LcSalazar</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642089_25413143"><span title="2014-08-20T19:43:15.490 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 19:43</span></a></span> </div> </div> </li> <li id="comment-39642166" class="comment js-comment " data-comment-id="39642166" data-comment-owner-id="3961689" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642166_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@LcSalazar It doesn't center the last line. EDIT-Or the first line if its the only one.</span> – <a href="../../users/3961689/james-hewitt" title="101 reputation" class="comment-user owner">James Hewitt</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642166_25413143"><span title="2014-08-20T19:45:52.873 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 19:45</span></a></span> </div> </div> </li> <li id="comment-39642409" class="comment js-comment " data-comment-id="39642409" data-comment-owner-id="1221248" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642409_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Tried myself but without success, may be [this][1] will help? [1]: http://stackoverflow.com/questions/427039/justify-text-in-a-html-xhtml-textarea</span> – <a href="../../users/1221248/pumych" title="1,368 reputation" class="comment-user ">Pumych</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642409_25413143"><span title="2014-08-20T19:53:36.860 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 19:53</span></a></span> </div> </div> </li> <li id="comment-39642524" class="comment js-comment " data-comment-id="39642524" data-comment-owner-id="3412365" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642524_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Maybe this will help? http://stackoverflow.com/questions/4704896/how-to-center-justify-text-in-css</span> – <a href="../../users/3412365/chargarg" title="37 reputation" class="comment-user ">chargarg</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642524_25413143"><span title="2014-08-20T19:57:33.797 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 19:57</span></a></span> </div> </div> </li> <li id="comment-39642578" class="comment js-comment " data-comment-id="39642578" data-comment-owner-id="1326536" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642578_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">text-align: justify -> Stretches the lines so that each line has equal width - if there is only one line there is nothing to stretch it against so it works as expected. Same goes for the last line it align the above line with the one underneath.</span> – <a href="../../users/1326536/gillesc" title="10,647 reputation" class="comment-user ">GillesC</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642578_25413143"><span title="2014-08-20T19:59:05.277 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 19:59</span></a></span> </div> </div> </li> <li id="comment-39642617" class="comment js-comment " data-comment-id="39642617" data-comment-owner-id="1326536" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642617_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You may need to involve higher power to get the result you want</span> – <a href="../../users/1326536/gillesc" title="10,647 reputation" class="comment-user ">GillesC</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642617_25413143"><span title="2014-08-20T20:00:30.727 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 20:00</span></a></span> </div> </div> </li> <li id="comment-39642709" class="comment js-comment " data-comment-id="39642709" data-comment-owner-id="3170478" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment39642709_25413143"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">There is actually a Css Text Level 3 Property called `text-align-last`, that is supposed to change the alignment of the last line of a text... But I couldn't figure it out yet... I think the support is not wide still too.. https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last</span> – <a href="../../users/3170478/lcsalazar" title="16,524 reputation" class="comment-user ">LcSalazar</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment39642709_25413143"><span title="2014-08-20T20:03:22.583 License: CC BY-SA 3.0" class="relativetime-clean">Aug 20 '14 at 20:03</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">4 Answers<span style="display:none;" itemprop="answerCount">4</span></h2> </div> </div> </div> <a name="25413529"></a> <div id="answer-25413529" class="answer accepted-answer" data-answerid="25413529" data-ownerid="1725764" data-score="21" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="25413529"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="21">21</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Unfortunately there is no concrete CSS solution at the time of writing to achieve the desired result.</p> <p>However CSS level 3 has introduced a feature under the name <code>text-align-last</code> to handle the alignment of the last line of a block:</p> <blockquote> <p><strong><a class="external-link" href="http://dev.w3.org/csswg/css-text/#text-align-last-property" rel="noreferrer">7.3 Last Line Alignment: the text-align-last property</a></strong></p> <p>This property describes how the last line of a block or a line right before a forced line break is aligned.</p> </blockquote> <p>But it is still in <em>Working Draft</em> state. Hence the browser support is not good enough to rely on this technology (It's still <a class="external-link" href="https://bugs.webkit.org/show_bug.cgi?id=76173" rel="noreferrer">buggy on Chrome 35</a> and only works on Firefox 12+).</p> <p>Here is an <strong><a class="external-link" href="http://jsbin.com/yoyiy/2/edit" rel="noreferrer">example</a></strong> which I'm not able to verify <sup>(because of my FF4. Yes! shame on me)</sup>:</p> <pre class="lang-css prettyprint-override"><code>textarea { white-space: normal; text-align: justify; -moz-text-align-last: center; /* Firefox 12+ */ text-align-last: center; } </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-08-20T20:12:45.233" class="relativetime">Aug 20 '14 at 20:12</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Hashem Qolami</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 20 '14 at 20:07">answered Aug 20 '14 at 20:07</time> <a href="../../users/1725764/hashem-qolami" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1725764.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Hashem Qolami" /> </a> <div class="s-user-card--info"> <a href="../../users/1725764/hashem-qolami" class="s-user-card--link">Hashem Qolami</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">97,268</li> <li class="s-award-bling s-award-blinggold" title="26 gold badges">26</li> <li class="s-award-bling s-award-blingsilver" title="150 silver badges">150</li> <li class="s-award-bling s-award-blingbronze" title="164 bronze badges">164</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-25413529" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="25413529" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-59401284" class="comment js-comment " data-comment-id="59401284" data-comment-owner-id="182588" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment59401284_25413529"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">In order to allow to show the new lines you must use 'white-space: pre-line;' instead of 'white-space:normal;'. See also [here](https://developer.mozilla.org/it/docs/Web/CSS/white-space).</span> – <a href="../../users/182588/paolo-gibellini" title="310 reputation" class="comment-user ">Paolo Gibellini</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment59401284_25413529"><span title="2016-03-08T13:32:10.463 License: CC BY-SA 3.0" class="relativetime-clean">Mar 08 '16 at 13:32</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="55231280"></a> <div id="answer-55231280" class="answer " data-answerid="55231280" data-ownerid="860099" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="55231280"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Alternative: use <code>contenteditable</code></p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { width: 100px; height: 150px; background: #eee; display:flex; align-items: center; justify-content: center; } .text { text-align: center; word-break: break-all; margin: 10px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="text" contenteditable=true>click here and edit</div> </div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-02-17T12:38:16.647" class="relativetime">Feb 17 '20 at 12:38</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Kamil Kiełczewski</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 18 '19 at 22:57">answered Mar 18 '19 at 22:57</time> <a href="../../users/860099/kamil-kielczewski" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/860099.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kamil Kiełczewski" /> </a> <div class="s-user-card--info"> <a href="../../users/860099/kamil-kielczewski" class="s-user-card--link">Kamil Kiełczewski</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">85,173</li> <li class="s-award-bling s-award-blinggold" title="29 gold badges">29</li> <li class="s-award-bling s-award-blingsilver" title="368 silver badges">368</li> <li class="s-award-bling s-award-bling__bronze" title="345 bronze badges">345</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-55231280" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="55231280" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-100196993" class="comment js-comment " data-comment-id="100196993" data-comment-owner-id="5896591" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment100196993_55231280"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">A possible issue with this solution is that it is hard to constrain the height of the editable region in Chrome.If you add more lines, it stretches the text outside of the 150px that you specified. (Firefox does not have this issue).</span> – <a href="../../users/5896591/personal-cloud" title="3,943 reputation" class="comment-user ">personal_cloud</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment100196993_55231280"><span title="2019-06-30T02:59:59.467 License: CC BY-SA 4.0" class="relativetime-clean">Jun 30 '19 at 02:59</span></a></span> </div> </div> </li> <li id="comment-100198769" class="comment js-comment " data-comment-id="100198769" data-comment-owner-id="860099" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment100198769_55231280"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@personal_cloud you can add to `.container` class the `overflow: auto;` to add scrollbars to prevent exceed div height by multilines text</span> – <a href="../../users/860099/kamil-kielczewski" title="85,173 reputation" class="comment-user ">Kamil Kiełczewski</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment100198769_55231280"><span title="2019-06-30T07:05:21.013 License: CC BY-SA 4.0" class="relativetime-clean">Jun 30 '19 at 07:05</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="73135647"></a> <div id="answer-73135647" class="answer " data-answerid="73135647" data-ownerid="9144421" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="73135647"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I know this was 7 years ago. But the short answer is that this works flawlessly</p> <pre><code>text-align: center </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 27 '22 at 09:41">answered Jul 27 '22 at 09:41</time> <a href="../../users/9144421/riya-adhikari" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9144421.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Riya Adhikari" /> </a> <div class="s-user-card--info"> <a href="../../users/9144421/riya-adhikari" class="s-user-card--link">Riya Adhikari</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">367</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-blingbronze" title="7 bronze badges">7</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="42708593"></a> <div id="answer-42708593" class="answer " data-answerid="42708593" data-ownerid="4040129" data-score="-3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="42708593"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-3">-3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>In order to center the textarea element, you have to declare it as a block element in CSS and then add typical centering rules, if necessary.</p> <pre class="lang-css prettyprint-override"><code>textarea { display: block; margin: 0 auto; } </code></pre> <p>I was looking for an answer to this and could not find out what I was looking for; hence this post.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Mar 10 '17 at 01:59">edited Mar 10 '17 at 01:59</time> <a href="../../users/2449905/dan-lowe" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2449905.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Dan Lowe" /> </a> <div class="s-user-card--info"> <a href="../../users/2449905/dan-lowe" class="s-user-card--link">Dan Lowe</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">51,713</li> <li class="s-award-bling s-award-blinggold" title="20 gold badges">20</li> <li class="s-award-bling s-award-blingsilver" title="123 silver badges">123</li> <li class="s-award-bling s-award-blingbronze" title="112 bronze badges">112</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 10 '17 at 01:32">answered Mar 10 '17 at 01:32</time> <a href="../../users/4040129/paul-latour" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4040129.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Paul Latour" /> </a> <div class="s-user-card--info"> <a href="../../users/4040129/paul-latour" class="s-user-card--link">Paul Latour</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">110</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-42708593" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="42708593" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-72539231" class="comment js-comment " data-comment-id="72539231" data-comment-owner-id="4516985" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment72539231_42708593"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">refer this first https://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks</span> – <a href="../../users/4516985/isuruab" title="2,202 reputation" class="comment-user ">isuruAb</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/25413143/justify-and-center-textarea-text-html-css#comment72539231_42708593"><span title="2017-03-10T01:46:54.207 License: CC BY-SA 3.0" class="relativetime-clean">Mar 10 '17 at 01:46</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">17</div></a> <a href="../../questions/427039/justify-text-in-a-html-xhtml-textarea" class="question-hyperlink">Justify Text in a HTML/XHTML TextArea</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>