当超过其宽度限制时，在容器内均匀地增加 textarea 宽度空间 - css答案

【问题标题】：Increase textarea width space evenly inside container, when over its width limit - css当超过其宽度限制时，在容器内均匀地增加 textarea 宽度空间 - css
【发布时间】：2017-12-04 19:05:07
【问题描述】：

我正在尝试均匀地增加这个文本区域的大小。但是当我将它从 100% 宽度更改为更高时，它只会向右增加。我尝试了边距自动和显示块但不起作用。这是我的CSS：

textarea[form="chform"] {

  width: 100%;
  height: 230px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: grey;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
  margin-top: 10px;
  resize:none;
}

.profile__form{
  padding: 15px;
  margin: auto;
  border-radius: 50%;

}
.profile_container {
  width: 400px;
  margin: 120px auto 120px;
  /*background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), #f0f0f0, rgba(223,190,106,0.7));*/
  padding: 0 20px 20px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
  text-align: center;
}

玉：

    extends layout
block content
 body(style='background-color:black')
    link(href='http://fonts.googleapis.com/css?family=Great+Vibes', rel='stylesheet', type='text/css')
    div.right  
        if(user)
            a Welcome #{user.name}
            | &nbsp
            a(href='/main') Home
            | &nbsp
            a(href='/profile') Profile
            | &nbsp
            a(href='/logout') Logout
        else
            a(href='/main') Home
            | &nbsp
            a(href='/register') Register
            | &nbsp
            a(href='/login') Login 

    div.profile_container
        form.profile__form(role='form', action="/add-chapters",id="chform" method="post", style='max-width: 800px;')
            .profile__form-heading Add Chapter
            input.form-control(type='number', min="1" name="chapterNumber", id="inputChapterNumber" placeholder='Chapter Number')
            br
            input.form-control(type='text', name="chapterTitle", id="inputChapterTitle", placeholder='Title')


        textarea(name='chapterStory', cols='30', rows='5', form="chform", placeholder="Enter Story")
        br
        button.chform(type='submit') Save

这是我在增加宽度后看到的图像。我只想要一个更大的文本区域并居中：

https://i.stack.imgur.com/xSBdL.jpg

编辑：确定添加父 css

【问题讨论】：

在左边可能是父元素的开始。最后添加 HTML 和相关的 CSS。理想情况下，这里是小提琴。
好的，我添加了父母的 CSS
我请你创建一个小提琴，我们可以看到它现在的样子。所以也添加一个 HTML，或者更好的是，创建一个工作小提琴。
什么是小提琴？
算了。将相关的 HTML 添加到问题中。

标签： html css pug

【解决方案1】：

图像现已修复： https://i.stack.imgur.com/dbtiY.jpg

所以我通过增加父容器的宽度来修复它，配置文件表单和配置文件容器。然后定位相对、显示块和边距自动。简单！

textarea[form="chform"] {

  width: 70%;
  height: 500px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
  color: grey;
  font-family: 'Exo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 4px;
  resize:none;
  position: relative;
  display:block;
  margin:auto;
  margin-top: 10px;




}

【讨论】：