DIV内容垂直居中_html/css_WEB-ITnose
程序员文章站
2022-04-19 12:02:09
...
css垂直居中属性设置vertical-align: middle对div不起作用,例如:
1 2 3 4 5 6DIV垂直居中对齐 7 35 36 3738 3940 41
运行后按钮没有在DIV中垂直居中:
解决思路:如果div和按钮的宽高都确定为具体像素值,可以直接设定按钮的css属性:position:relative; top为(div.height - button.height)/2,left为(div.width-button.height)/2;否则给按钮添加一个div父元素,宽高和按钮相 同,position设定为relative,top和left都为50%(即左上角位置设定在外层div的中心),再将按钮左上角位置坐标设定为父元素 div宽高(也等于按钮自身宽高)的-50%
详细代码如下:
1 2 3 4 5 6DIV垂直居中对齐 7 45 46 474852 5349 5051
再次运行后,div中按钮上下居中显示
END
上一篇: PHP如何实现云打印
推荐阅读
-
详解HTML5中垂直上下居中的解决方案
-
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
-
笔记:UITextView内容垂直居中方法
-
多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?
-
php正则匹配html中带class的div并选取其中内容的方法
-
HTML连载41-水平居中的注意点、盒子居中和内容居中
-
css3 flex实现div内容水平垂直居中的几种方法
-
python的xpath获取div标签内html内容,实现innerhtml功能的方法
-
POI 单元格垂直居中,相同内容的单元格合并
-
HTML技巧篇:实现元素水平与垂直居中的几种方式