2016-05-15 102 views
0

如何在textarea中水平和垂直居中文本?在文本区水平和垂直居中文本

HTML

<div id="visu"> 
      <div id="element1"class="flex-item"> 
       <textarea class= "name" id="name1" >Apud has gentes, quarum exordiens initium ab Assyriis </textarea> 
      </div> 
      <div id="element2" class="flex-item"> 
       <textarea class= "name" id="name2">Ultima Syriarum est Palaestina </textarea> 
      </div> 
      <div id="element3" class="flex-item"> 
       <textarea class="name" id="name3">Saepe posset commodi contentionem honoris quam incidissent optimis adipisci commod.</textarea> 
      </div> 

     </div> 

CSS #visu { 位置:绝对; 宽度:95%; left:-5ppx; top:50px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around; } #visu .flex-item {position}:absolute; display:table; 宽度:30%; margin-bottom:30px; height:160px; margin-right:-20px;

 } 

     .flex-item .name { 
      display:table-cell; 
      border:3px solid blue; border-radius:10px; 
      padding:20px; box-sizing:border-box; 
      background-color:white; 
      width=150px; 
      height:180px; 
      font-size:16px; 
      text-align:center: 
      vertical-align:middle; 

     } 

回答

0

的CSS应该是

<style> 
    #visu { 
     position:absolute; 
     width:95%; 
     left:-5ppx; 
     top:50px; 
     display:flex; 
     flex-direction:row; 
     flex-wrap:wrap; 
     justify-content:space-around; 
    } 

    #visu .flex-item { 
     /* position:absolute; */ 
     display:table; 
     width:30%; 
     margin-bottom:30px; 
     height:160px; 
     margin-right:-20px; 
    } 

    .flex-item .name { 
     display:table-cell; 
     border:3px solid blue; border-radius:10px; 
     padding:20px; box-sizing:border-box; 
     background-color:white; 
     width:150px; 
     height:180px; 
     font-size:16px; 
     text-align:center; 
     vertical-align:middle; 
    } 
</style> 

请检查你的代码

+0

我似乎没有工作。你能检查我的小提琴 – fredericmarcel

0
APUD有氏族,quarum exordiens initium AB Assyriis 终极Syriarum EST Palaestina Saepe posset commodi contentionem荣誉quam incidissent optimis adipisci commod。
+0

你必须从第二个div标签中取出textarea标签。 – katie

0
#visu { 
    position:absolute; 
    width:95%; 
    left:-5ppx; 
    top:50px; 
    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
    justify-content:space-around; 
} 

    #visu .name { 
    /* position:absolute; */ 
    display:table; 
    width:30%; 
    margin-bottom:30px; 
    height:160px; 
    margin-right:-20px; 
} 

    #visu textarea.name { 
    display:table-cell; 
    border:3px solid blue; border-radius:10px; 
    padding:20px; box-sizing:border-box; 
    background-color:white; 
    width:150px; 
    height:180px; 
    font-size:16px; 
    text-align:center; 
    vertical-align:middle; 
} 
+0

也像上面提到的那样更改css – katie

+0

它似乎不起作用。你能检查我的小提琴吗? – fredericmarcel