将文本在文本区域中水平和垂直居中

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；顶部：50px；显示：flex；弯曲方向：行；柔性包裹：包裹；合理的内容：周围的空间；}#visu.flex项目{//位置：绝对；显示：表格；宽度：30%；页边距底部：30px；高度：160px；右边距：-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有绅士，他们是亚述人Ultima Syrarum est PalaestinaSaepe拥有商品的满足感和荣誉感，并优化了商品

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

Answer 4

检查以下代码以在文本区域[垂直和水平]中显示居中对齐的内容

 .flex-item .name {
          
            border:3px solid blue; border-radius:10px;
            padding:20px; box-sizing:border-box;
            background-color:white;            
            height:180px;
            font-size:16px;
            text-align:center;display: inline-block;  padding-top:50px;
        }

<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>