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

时间:2016-05-15 13:17:28

标签: html textarea center

如何在文本区域中水平和垂直居中显示文本?

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;

        }

4 个答案:

答案 0 :(得分: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>

请检查您的代码

答案 1 :(得分:0)

                              Apud有种族,quarum exordiens initium ab Assyriis                                Ultima Syriarum est Palaestina                                Saepe posset commodi contentionem honoris quam incidissent optimis adipisci commod。         

答案 2 :(得分: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;
}

答案 3 :(得分:0)

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

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