发表新帖
发表新帖

Why doesn't margin:auto center an image?

前端 未结
关注
8 744
误落风尘
误落风尘 2020-12-04 22:55 


Test


    

        

        

                      

              相关标签:
8条回答
  • 感动是毒
    2020-12-04 23:22

    You need to render it as block level;

    img {
   display: block;
   width: auto;
   margin: auto;
}
    0 讨论(0)
  • 不要未来只要你来
    2020-12-04 23:29

    Because your image is an inline-block element. You could change it to a block-level element like this:

    <img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

    and it will be centered.

    0 讨论(0)
  • 情深已故
    2020-12-04 23:32

    open div then put 

    style="width:100% ; margin:0px auto;"

    image tag (or) content

    close div

    0 讨论(0)
  • 既然无缘
    2020-12-04 23:33

    Add style="text-align:center;"

    try below code 

    <html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-04 23:38

    i know this is an old post, but wanted to share how i solved the same problem.

    My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.

    0 讨论(0)
  • 轻奢々
    2020-12-04 23:42 
    <div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
    0 讨论(0)
 看不清?
提交回复
热议问题