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; 顶部：50像素; 显示：弯曲; 挠曲方向：行; 弯曲缠绕：包裹; 证明内容：空间周围; } #visu .flex-item { //位置：绝对; 显示：表; 宽度：30％; 边距：30像素; 高度：160像素; 余量右：-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有种族，quarum exordiens initium ab Assyriis Ultima Syriarum est Palaestina Saepe posset commodi contentionem honoris quam incidissent optimis adipisci commod。

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

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

4 个答案: