【笔记】图片在<div>中水平和垂直居中的两种方法

最新推荐文章于 2021-11-25 17:13:41 发布
最新推荐文章于 2021-11-25 17:13:41 发布
阅读量874 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingfox/article/details/80026798
版权

以下是使得图片在<div>中水平和垂直居中的两种方法：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>DIV水平及垂直居中</title>
      <style>
         /* 方案1 */
         .img-box
         {
            width: 400px; line-height: 300px;
            border: solid; border-width: thin; border-color: rgb(0, 255, 0);
            text-align: center;
            float: left;
         }
         .img-style-big
         {
            width: 360px; height: 270px;
            vertical-align: middle;
         }

         /* 方案2 */
         .img-table
         {
            display: table;
            width: 1280px; height: 240px;
            border: solid; border-width: thin; border-color: rgb(0, 0, 255);
         }
         .img-row
         {
            display: table-row;
            width: 100%; height: 100%;
            border: solid; border-width: thin; border-color: blue;
         }
         .img-cell
         {
            display: table-cell;
            width: 25%; line-height: 240px;
            text-align: center;
            border: solid; border-width: thin; border-color: cyan;
         }
         .img-style-small
         {
            width: 240px; height: 180px;
            margin: auto;
            vertical-align: middle;
         }
      </style>
   </head>

   <body>
      <!-- 方案1：可使得三个图片在同一行，且各自在框中水平和垂直居中。但是当浏览器窗口变窄时，右边的图框会自动移动到下一行。 -->
      <!-- 适用于Chrome、Firefox、IE 8+ -->
      <div style="display: table; border: solid; border-width: thick; border-color: rgb(255, 0, 0); padding: 4px;">
         <div class="img-box">
            <img src="img/007.jpg" class="img-style-big" />
         </div>
         <div class="img-box">
            <img src="img/007.jpg" class="img-style-big" />
         </div>
         <div class="img-box">
            <img src="img/007.jpg" class="img-style-big" />
         </div>
      </div>

      <!-- 方案2：可使得三张图片在同一行，且各自在框中水平和垂直居中。当浏览器窗口变窄时，布局不会发生变化，浏览器地步会出现滚动条。 -->
      <!-- 适用于Chrome、Firefox、IE 8+ -->
      <div class="img-table">
         <div class="img-row">
            <div class="img-cell">
               <img src="img/007.jpg" style="width: 240px; height: 180px; margin: auto; vertical-align: middle;" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
         </div>
         <div class="img-row">
            <div class="img-cell">
               <img src="img/007.jpg" style="width: 240px; height: 180px; margin: auto; vertical-align: middle;" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
            <div class="img-cell">
               <img src="img/007.jpg" class="img-style-small" />
            </div>
         </div>
      </div>
   </body>
</html>

当浏览器窗口足够宽时，方案1（上半截3张大图）、2（下半截8张小图）的展示效果如下图所示：


当浏览器窗口变窄时，方案1的效果如下图所示：


可以发现，最右边的图片自动移到了下一行。

而方案2的效果如下图所示：


可以发现图片的位置并未随着浏览器窗口的变化而变化，浏览器出现了滚动条。


                

        

        

    




    

      

        

            

              
                
                  狐帝
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html中div设置图片居中显示,图片在DIV中居中显示的方法

				
			

			

				

					weixin_39546501的博客
				

				

					06-24
					
					9774
					
				

			

		

		

			
				
问：如何让图片在DIV中水平和垂直两个方向都居中？(注意这里的图片非用作背景)关于该问题的解决方法如下：方法一：思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。结构如下：CSS样式如下：div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text...

			
		

	



                

              
                



	

		

			

				
					
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx

					
最新发布

				
			

			

				

					04-18
				

			

		

		

			
				
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告

			
		

	



                


  
              

                


	

		

			

				
					
在div里如何让图片居中(4种方法)

				
			

			

				

					qq_36608036的博客
				

				

					11-25
					
					1万+
					
				

			

		

		

			
				
方法一：
　　思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
　　<div>
　　<img src="images/tt.gif" width="150" height="100" />
　　</div>

CSS样式如下：
　　div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:ce

			
		

	





	

		

			

				
					
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法

				
			

			

				

					weixin_31766871的博客
				

				

					05-31
					
					1万+
					
				

			

		

		

			
				
1、text-align:center实现图片水平居中text-align一般用于文本的水平居中，也可以用于图片，代码如下：CSS部分：div{text-align:center;width:500px;border:greensolid1px;}HTML部分：效果图：图片垂直居中1.jpg2、line-height和text-align:center实现图片的水平垂直居中设置line-heigh...

			
		

	



		

			
		



	

		

			

				
					
DIV里面的图片水平与垂直居中的方法

				
			

			

				

					qq_37160320的博客
				

				

					07-30
					
					727
					
				

			

		

		

			
				
DIV里面的图片水平与垂直居中的方法<div class=“box”>　　<img /></div>
1.水平居中：　　1）box设置text-align:center;    text-align:center可以实现子元素字体，图片的水平居中。  2）img设置margin:0 auto;display:block;            margin:0 auto是针对块元素的水平居中方法，所

			
		

	





	

		

			

				
					
div中图片垂直水平居中

				
			

			

				

					Key_Val的博客
				

				

					05-11
					
					241
					
				

			

		

		

			
				
下方是完整demo代码，分享的力量来源于———>点个赞



    
    
    div中的图片居中四种方法



    
        
        
        
        
    





			
		

	





	

		

			

				
					
让DIV水平垂直居中的两种完美方法推荐

				
			

			

				

					01-19
				

			

		

		

			
				
今天写的了百度前端学院春季班的任务：定位和居中问题 由于距离上次学习CSS有点久远了，加上以前木有记笔记的习惯，方法忘得只剩下一种，今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中。...

			
		

	





	

		

			

				
					
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度).docx

				
			

			

				

					07-27
				

			

		

		

			
				
所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有 valign特性的元素才生 效，例如表格元素中的<td>、<th>、<caption>等，而 像<div>、<span>这样的元素是没有valign特性的...

			
		

	





	

		

			

				
					
centerr:一个简单的jQuery插件，可在元素的父元素中绝对水平和垂直居中

				
			

			

				

					05-18
				

			

		

		

			
				
中心一个简单的jQuery插件，可在元素的父元素中绝对水平和垂直居中用： $ ( window ) . on ( "load resize" , function ( ) {$ ( '#targetElement' ) . centerr ( ) ;} ) ;选项：手机：767 浏览器宽度，低于该宽度时...

			
		

	





	

		

			

				
					
dwr3 学习笔记<一>

				
			

			

				

					07-31
				

			

		

		

			
				
NULL 博文链接：https://lee20101029.iteye.com/blog/960569

			
		

	





	

		

			

				
					
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园

				
			

			

				

					没做过产品的后端不是个好前端
				

				

					11-09
					
					1286
					
				

			

		

		

			
				
DIV或者DIV里面的图片水平与垂直居中的方法


<div class=“box”>
　　<img />
</div>

水平居中的常用方式：

　　text-align:center ——这可以实现子元素字体，图片的水平居中。

　　margin:0 auto —— 这是针对块元素的水平居中方法

垂直居中的常用方式： 

　　vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。
...

			
		

	





	

		

			

				
					
在DIV中图片垂直/水平居中(最简单方法).rar

				
			

			

				

					07-03
				

			

		

		

			
				
在DIV中图片垂直/水平居中(最简单方法)

			
		

	





	

		

			

				
					
在div中将图像水平居中

				
			

			

				

					CHCH998的博客
				

				

					06-06
					
					500
					
				

			

		

		

			
				
This is probably a stupid question but since the usual ways of center aligning an image are not wor

			
		

	





	

		

			

				
					
php图片居中在div,在div内将图像水平居中

				
			

			

				

					weixin_32667439的博客
				

				

					03-18
					
					141
					
				

			

		

		

			
				
这可能是一个愚蠢的问题，但由于通常的中心对齐图像的方式不起作用，我想我会问。 如何在容器div内居中(水平)对齐图像？这是HTML和CSS。 我还包括了缩略图的其他元素的CSS。 它按降序运行，所以最高的元素是所有东西的容器，最低的元素是所有东西的内部。null#thumbnailwrapper {color: #2A2A2A;margin-right: 5px;border-radius: 0....

			
		

	





	

		

			

				
					
将图片在div中进行水平和垂直对齐

				
			

			

				

					weixin_34220963的博客
				

				

					11-15
					
					184
					
				

			

		

		

			
				
将图片在div中进行水平和垂直对齐
要进行水平对齐，只需在父级元素的样式中指定：
text-align: center;
注意，是在父级元素的样式中指定，而不是在img本身的样式中指定。

要进行垂直对齐，相对来说则麻烦得多。期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的，在img元素本身的样式中指定也同样行不通（你在网上查到的方法都...

			
		

	





	

		

			

				
					
让图片在div里居中（三种方法）

				
			

			

				

					我想月薪过万的博客
				

				

					03-01
					
					2万+
					
				

			

		

		

			
				
问题

当我们将一张 img 放在 一个 div 里的时候，具有超高审美的我们，硬是要将 img 居中于 div。所以，产什么以下解决方法。

解决方法

布局文件代码


<div class="content">
     <img src="img_p1_title.png">
</div>


第一种方法：



.content{
  width:340px;
  height:40px;
  display: flex;
  justify-content: 

			
		

	





	

		

			

				
					
div里的img图片水平垂直居中（解决）

					
热门推荐

				
			

			

				

					孟林洁的博客
				

				

					07-20
					
					3万+
					
				

			

		

		

			
				
转记！

实现div里的img图片水平垂直居中

			
		

	





	

		

			

				
					
网站界面设计mortal0418代码

				
			

			

				

					04-18
				

			

		

		

			
				
网站界面设计mortal0418代码

			
		

	





	

		

			

				
					
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笔记本信息</title>
</head>
<body background="static/images/fff.jpg"
      style="background-size:100%;
      background-attachment:fixed">
  <!-- ======= Counts Section ======= -->
    <section class="counts section-bg">
        <div class="container">

            <table class="table_tr" width="1000" align="center"  frame="box" rules="all">
                <tr align="center">
                        <th>商品图片</th>
                        <th>商品地址</th>
                        <th>价格</th>
                        <th>商铺</th>
                </tr>
                    {% for star in datalist %}
                    <tr>
                        <td>
                            <img src="{{star[2]}}" target="_blank"> </img>
                        </td>
                        <td align="center">
                            <a href="/chart" target="_blank">{{star[1]}}</a>
                        </td>
                        <td>
                            <a href="{{star[3]}}" target="_blank">{{star[3]}}</a>
                        </td>
                        <td>
                            <a href="{{star[5]}}" target="_blank">{{star[4]}}</a>
                        </td>


                    </tr>
                {% endfor %}
            </table>
        </div>
    </section><!-- End Counts Section -->
</body>
</html>

				
			

			

				

					07-16
				

			

		

		

			
				
10. 商品图片、商品地址、价格和商铺：通过 <img> 和 <a> 标签展示商品的图片和链接，并设置目标为 "_blank"，使链接在新窗口中打开。  总体而言，这段代码使用HTML和模板引擎（可能是Flask的模板引擎）来动态生成...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值