首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

如何在较大的div内制作图像中心(垂直和水平)

作者：重庆制造漫画社 | 2023-09-01 16:56
如何解决《如何在较大的div内制作图像中心(垂直和水平)》经验，为你挑选了19个好方法。

我有一个200 x 200像素的div.我想在div的中间放置一个50 x 50像素的图像.

怎么做到呢？

我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..



1> Jonathan Arg..：

在旧浏览器中工作(IE> = 8)

绝对位置结合自动边距允许水平和垂直居中元素.元素位置可以基于使用相对定位的父元素位置.查看结果

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

只需使div相对`#someDiv {position:relative}`
这对我很有用,当你没有容器DIV或图像的确切大小时会有所帮助.谢谢!
您也可以通过省略顶部和底部专门水平居中,并通过省略右侧和左侧专门垂直居中.

2> 小智..：

就个人而言,我将它作为背景图像放在div中,CSS就是:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(假设id="demo"你正在指定div height并width添加一个background不应该是一个问题)

让浏览器承受压力.

如果您想添加ALT属性,请不要像SEO /读者友好.
这通常是最好的答案,除非图像的大小可以从小到大大于容器的大小.在'较小'的情况下,它会很好,但在'更大'的情况下,你的图像将被剪裁.
如果我们使用精灵呢？我试图将背景图像居中,但我正在使用CSS精灵.有任何想法吗？

3> andyk..：

另一种方法是创建一个tablewith valign,当然.无论你是否知道div的高度,这都可行.


   

   

      foo

但是你应该css尽可能地坚持下去.

难道你不知道使用桌子导致失明吗？
我知道这会让我失望.我只是为了完整性而考虑列出这个,但是,哦,好吧.
异议,animuson:所有其他解决方案,这里假设你知道图像的大小,因为它们出现在浏览器,如果你设计一个响应式布局在您的形象是"****的高度:100%",这是不是这样的,它的容器是"**宽度**:25%",留下未知大小的x或y边距.
尽可能使用CSS,但这绝对是一个有用的后备.不要忘记为什么我们首先停止使用表格.使用最灵活的*解决方案.有时就是这样.
**注意:**这可能是在2008年"可接受",但在2012年,这是**永远不会被接受.

4> Tim Knight..：

我会设置你的更大的div position:relative;然后为你的形象做这个:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

这只能起作用,因为您知道图像和包含div的尺寸.这也可以让你在包含div中的其他项目...使用line-height的解决方案不会.

编辑:注意...你的边距是图像大小的一半.

我使用了这个,但删除了`margin`位并添加了`-webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);`.提供需要元素大小的更通用的解决方案.

5> Chris..：

这工作正常:

display: block;
margin-left: auto;
margin-right: auto

如果上面只给你水平居中,请尝试这个:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

适用于水平定心,不适用于垂直定心

6> avrahamcool..：

这是另一种将所有内容集中在一起的方法.

工作小提琴

HTML :(简单如初)


    
 /*this can be an img, span, or everything else*/
        I'm the Content

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

优点

容器和内容高度未知.

没有特定负边距的居中,没有设置行高(因此它适用于多行文本)和没有脚本,也适用于CSS过渡.



7> 小智..：

这有点晚了,但这是我用来垂直对齐父div中的元素的解决方案.

当您知道容器div的大小但不知道所包含图像的大小时,这非常有用.(使用灯箱或图像轮播时经常出现这种情况).

这是你应该尝试的样式:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

添加文字对齐:中心; 如果您将最大高度/宽度应用于未知大小的图像,则容器div和它的两个方向都居中.
我认为最好的答案。并且不要忘记text-align：center;

8> 小智..：

使用Flexbox:https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}



9> svachalek..：

我发现上面的Valamas和Lepu的答案是处理未知大小或已知大小的图像的最直接的答案,你不想硬编码到你的CSS中.我只是做了一些小调整:删除不相关的样式,将其大小调整为200px以匹配问题,并添加max-height/max-width来处理可能太大的图像.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}



10> Scott Evernd..：

在div中


        

11> Alex..：
Vertical-align是最滥用的css样式之一.对于不是td或css"display:table-cell"的元素,你的预期效果不正常.



这是一个非常好的帖子.http://phrogz.net/CSS/vertical-align/index.html



实现您正在寻找的最常用的方法是:





填充顶部/底部


绝对的位置


行高



        

12> Code Breaker..：
在CSS中执行:



img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}


        
不起作用 -  http://jsfiddle.net/dandv/umBRF/,虽然原因不是像knoxxs所暗示的上限/下限.要使图像显示为表格单元格,需要*parent*元素来显示`display:table-cell; vertical-align:middle;` -  http://jsfiddle.net/dandv/umBRF/1/ 
这只是使它成为水平中心.如果为顶部和底部边距提供自动,则浏览器默认将其设置为零. 

13> 小智..：
@sleepy您可以使用以下属性轻松完成此操作:







#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}



  




14> Triptych..：
通常,我将设置line-height为200px.通常是诀窍.

        

15> Diego Tercer..：
我有一个图像库,我不知道图像的确切高度或宽度,我只知道它们比它们将被包含的div小.



通过在容器上使用行高设置和在image元素上使用vertical-align:middle的组合,我终于使用以下HTML标记和以下CSS在FF 3.5,Safari 4.0和IE7.0上工作.



HTML标记








CSS



div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }


        

16> Alain Beauvo..：
这对我有用:




  

    

         
    

  





        

17> Danield..：
Another way (not mentioned here yet) is with Flexbox.



Just set the following rules on the container div:



display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */




FIDDLE







div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}



  在此输入图像描述










   














19> joshuahedlun..：
这是一个旧的解决方案,但浏览器市场份额已经足够先进,如果您不担心IE7的降级,您可以在没有IE黑客部分的情况下通过.当您知道外部容器的尺寸但是可能知道或不知道内部图像的尺寸时,这种方法有效.





.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}






 

     

         bar
     

 



            


    


    


    

        
推荐阅读

        

            
        

    


    
























    


    

        

            
            

                
                    devbox
                
            


            

                重庆制造漫画社            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    




    









    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有