テキストエリア内のテキストを水平方向および垂直方向に配置

Question

どのようにテキストをテキストエリアに水平および垂直に配置することができますか？

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％; 左：-5ppx; top：50px; display：flex; フレックス方向：行; フレックスラップ：ラップ; justify-content：space-around; } #visu .flex-item { //位置：絶対; display：table; 幅：30％; margin-bottom：30px; 身長：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; 

     } 

Answer 1

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> 

する必要がありますあなたのコード

Answer 2

をチェックAPUDがgensの複数形、quarum exordiens initium AB Assyriis ウルティマSyriarum EST Palaestina Saepe posset commodi contentionemていてください名誉毀損incidissent optimis adipisci商品

Answer 3

#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; 
}