浮动div中的图片垂直居中

 浮动div中的图片垂直居中_第1张图片

 table-cell方法垂直水平居中

DOCTYPE html>
<html>
<head>
<meta name="description" content="table-cell方法居中">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bintitle>
head>
<style>
.upload_img {
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  display: table-cell;
  background: #eee;
  vertical-align: middle;
}
.upload_img img {
  border: none;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
style>

<body>
    <div id="imgdiv3" class="upload_img">
           <img src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg"  id="imgShow3"  >
      div>
body>
html>

 浮动div中的图片垂直居中_第2张图片

当div浮动的时候就无法使用上面的方法进行垂直居中了,接下来就用到line-height进行居中了

DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bintitle>
head>
    <style>
            .upload-img {
            float:right;
      width: 200px;
      height: 200px;
      background-color: #ccc;
      line-height: 200px;
      vertical-align: middle;
      text-align: center
    }
img{
  vertical-align: middle;max-width:100%;max-height:100%;
}
    style>    
<body>
<div>
  <div class="upload-img">
    <img  src="http://images2015.cnblogs.com/blog/653009/201603/653009-20160310103258132-1841991840.jpg">
   div>
div>

body>
html>

 

有个问题值得注意,编写代码的时候没有添加

造成了没有办法垂直居中!

代码演示:https://jsfiddle.net/silence19/djmznmpa/

转载于:https://www.cnblogs.com/silences/p/6178034.html

你可能感兴趣的:(浮动div中的图片垂直居中)