图片在父元素里面水平垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>

</head>

<body>

<div class="pic"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""></div>

<div class="pic"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2201558756,12364836&fm=111&gp=0.jpg" alt=""></div>

</body>

</html>

<style>

.pic { width: 120px;height: 120px;margin: 40px auto;border: 1px solid #ccc;text-align: center;padding: 5px; }

.pic:before { content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0; }

.pic img { max-width: 120px; max-height: 120px;vertical-align: middle; }

</style>

时间： 2024-10-28 21:08:03

图片在父元素里面水平垂直居中的相关文章

CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

css实现子层在父层中水平垂直居中

例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

绝对定位元素实现水平垂直居中

第一种: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. 第二种: CSS3的兴起,使得有了更好的解决方法,就是使用transf

jquery实现元素自适应水平垂直居中

(function($){ $.fn.vhAlign =  function(){ return this.each(function(i){ //获取元素的内容高度 var h = Math.ceil($(this).height()); //outerHeight=padding+border+height var oh = Math.ceil($(this).outerHeight()); //取得margin-top值 var mt = Math.ceil(oh / 2); //取得元素

如何实现固定宽高的DOM元素的水平垂直居中

效果: 实现代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 0; padding: 0;} #div1{ margin-top: 100px; margin

margin:auto实现绝对定位元素的水平垂直居中

代码拍上,赶时间的童鞋拿着用就好:div {width: 1000px; height: 500px;position: absolute; left: 0; top: 0; right: 0; bottom: 0;margin: auto; /* 重点在于 auto */} 博主之前用的方式也是不错,只是在不知道“container”的长.宽时需要额外使用JQ来获取长宽,这么看来,第一种方法更加万金流:)#container{position:absolute;left:50%;top:50%

定位实现水平垂直居中的两种方法（无需计算）

首先给想要居中的元素设置绝对定位,其父元素设置相对定位. 然后,方法一:top,left,right,bottom都设置为0,margin:auto,即可在父元素中水平垂直居中. 方法二:top,left都设置为50%,然后transform:translate(-50%,-50%),如果其他地方也用到了transform并且设置transition容易误伤这里.

CSS元素（文本、图片）水平垂直居中方法

1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relative; + float:left; 5.line-height 6.上下左右padding 7.position:absolute; + margin:auto; 8.position:absolute; + 负margin 9.position:absolute; + calc() 10.tabl