zoukankan      html  css  js  c++  java
  • div小技巧之子元素垂直居中

      最近在开发jsp页面,老是被一个问题困扰着:在使用div标签实现按钮外观时,内部文字无法垂直居中显示。在表格中,要实现表格内容垂直居中,非常简单,只要给列标签加上valign属性为middle即可:<td valign="middle">。但是div标签并没有valign的css样式设置,如果不加控制,显示效果如下:

    <style type="text/css">
           #d1{
               300px;
               height:100px;
               font-size:30px;
               background:pink;
           }
       </style>
    
    
        <div id="d1">
            要居中的文字
        </div>

    
    

      

      可以看出文字并没有垂直居中,能够实现垂直居中的一个技巧是:不要指定div的高度,通过设定内边距实现居中:

    <style type="text/css">
           #d1{
               width:300px;           
               font-size:30px;
               background:pink;
               padding:20px;    //这里通过设定padding为20px,实现边框为20px;
          }
       </style>
    
    
        <div id="d1">
            要居中的文字
        </div>

      如果块内文字数量不定或者还包含其他元素,母元素能够自动适应高度:

    <style type="text/css">
           #d1{
               width:300px;           
               font-size:30px;
               background:pink;
               padding:20px;
          }
       </style>
    
    
        <div id="d1">
            要居中的文字
           <div style="200px;height:50px;background:green;"></div>
        </div>

      要实现内边距垂直居中,要注意不能指定母元素div的高度(指定为0都不行)

      技巧二:通过css样式display:table & display:table-cell & vertical-align:middle来实现,先把要实现居中的div块放在另一个div内部,外部的div设置的高度、宽度不设置,自动适应内部因素的大小,只控制内部元素的内容居中,但是要添加样式display:table。内部div块添加样式display:table-cell & vertical-align:middle,这样就能实现内部因素的垂直居中,如下:

    <div style="200px;height: auto;background-color: white;margin: auto;border: 5px solid blue;display: table">
    
            <div style="background: yellow; 100px;height: 100px;display: table-cell; vertical-align:middle;text-align: center">
               
                要居中的文字
                <div style="background: green; 50px;height:20px;display: table-cell"></div>
                
            </div>
    
        </div>

    不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之
  • 相关阅读:
    Linux下关于信号block与unblock的小研究
    perl打印乘法表
    Linux下libaio的一个简单例子
    heritrix的简单使用以及在后台调用heritrix
    perl修改文件内容
    Linux下mmap函数的一个练习
    Linux real uid 和 effective uid相关总结
    阶段性小总结
    归并排序的一个练习
    利用openssl进行base64的编码与解码
  • 原文地址:https://www.cnblogs.com/lauyu/p/3815913.html
Copyright © 2011-2022 走看看