随机图片大小在DIV中垂直居中对齐总结

老遇到这种样式现在总结一下

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
    *{margin:0;padding:0;line-height: 1;font-size: ‘宋体‘;padding:0;font-size: 1em;}
    body{background-color: #000;}
    #canvas{width: 900px;margin:50px auto;}
    .box{width: 900px;height: 2000px;text-align: center;display: table-cell;background-color: #fff;*zoom:1;}
    .box em{width: 0;height: 100%;display: inline-block;vertical-align: middle;}
    .box img{display:inline-block;vertical-align: middle;}
</style>

</head>
<body>
<div id="canvas">
    <div class="box"><em></em><img src="http://e.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a29a1dde8c79b25bc315c607ca5.jpg" alt="" /></div>
</div>
</body>
</html>

随机图片大小在DIV中垂直居中对齐总结,布布扣,bubuko.com

时间： 2024-10-07 05:02:20

随机图片大小在DIV中垂直居中对齐总结的相关文章

如何将一个绝对定位的div水平垂直居中对齐

如何将一个绝对定位的div垂直居中对齐:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在某些时候可能需要将一个绝对定位的div在它的父对象中垂直居中对齐,可能用到的频率不是太高,但是偶尔也会用到,下面就简单介绍一下如何实现此功能.在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可.但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现.代码示例如下: <!DOCTYPE html>

文字在div中垂直居中的方法，设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

a标签内容在div中垂直居中，不兼容低版本浏览器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head> <style>.box{width:100px;height:200px;background:orange;border:2px solid #ccc;display: table;}.box a{dis

未知行数的文字在div中垂直居中

今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,html代码如下:(经测试,除了IE7,其他浏览器都成功的垂直居中了) <div class="m"><div class="m1"><div class="m2">南京证券股份业部份业部</div><

设置span在div中垂直居中

转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居中 <div style="display:table-cell;height:100px;font-size:12px;font-height:14px;vertical-align:middle;text-align:center"> <span> ceshic

CSS-布局【1】-图片在div中垂直居中

方法一:在img标签前加span <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; text-ali

小div在大div中垂直居中，以及div在页面垂直居中

<html> <head> <title>淘宝 2faner</title> <style type="text/css"> .big{ width: 800px; height: 500px; background: #333; position:absolute;left: 50%; top: 50%; margin-left:-400px; margin-top: -250px; } .small{ width: 40

APICloud学习笔记之input 在div 中垂直居中

效果 div 1 <header id="header"> 2 <div class="left" tapmode onclick="fnOpenCitySelectorFrame();"> 3 <div class="city" id="city">北京市北京市北京市</div> 4 <div class="arrow" id=&q

小的div在大的div中垂直居中

方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"> <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div&