div中的图像未居中（HTML/CSS），使用边距：0自动；_Html_Css_Margin

div中的图像未居中（HTML/CSS），使用边距：0自动；

html css

div中的图像未居中（HTML/CSS），使用边距：0自动；,html,css,margin,Html,Css,Margin,在您回答之前：我已经查看并尝试了其他堆栈溢出问题，它们都没有解决我的问题，并且它们都有相似的答案：下面是图像的基本代码： <div class="logo-con"> <img src="http://placehold.it/150x150/" class="logo1"/> </div> 当我这样做时会发生什么额外信息-当浏览器大小低于880PX时，它位于中心，当它高于该值时，它不在中心。最重要的是，我的整个页面似

在您回答之前：我已经查看并尝试了其他堆栈溢出问题，它们都没有解决我的问题，并且它们都有相似的答案：

下面是图像的基本代码：

    <div class="logo-con">
        <img src="http://placehold.it/150x150/" class="logo1"/>
    </div>

当我这样做时会发生什么

额外信息-当浏览器大小低于880PX时，它位于中心，当它高于该值时，它不在中心。最重要的是，我的整个页面似乎都被打破了。当我在媒体查询处于活动状态时刷新时，当您尝试调整大小时，它会破坏样式，您需要刷新以使其再次看起来正常，这些链接是否已链接

================================================================================

因为它似乎在小提琴上工作得很好，这是我的页面代码，我遗漏了什么吗

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

        <!-- Stylesheets -->
        <link href="index.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <!-- <img src="http://www.hdwallpapers.in/walls/tom_clancys_the_division_2015_game-wide.jpg" alt="..." class="bg-img"/> -->

    <div class="main">
        <span class="g-site-title">example</span>
        <ul>
            <a href="#"><li class="active">example</li></a>
            <a href="#"><li>example</li></a>
            <a href="#"><li>example</li></a>
            <a href="#"><li>example</li></a>
            <a href="#"><li>example</li></a>
        </ul>
    </div>

    <div class="logo-con">
        <img src="http://placehold.it/150x150/" class="logo1"/>
    </div>




    <!-- AJAX/jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>


        $(document).ready(function() {
            // Code Here
        });


    </script>

    </body>
</html>

您需要添加以下CSS：

display:block;

这需要应用于图像。

没有CSS，但是如果您在

边距：auto 0

方面遇到问题，很可能是因为

img

标签默认为

内联的

，并且会忽略该规则。设置：

.logo1{
  display: block;
}

发布CSS后更新

这看起来不错：

新更新

这是你头上的浮动问题。您需要使用clearfix或

overflow:hidden

清除父项上的浮动，该父项为

.main

您的

.main

类需要一个

溢出：隐藏的。我已经更新了我的JSFIDLE。
请添加logo1类的css。css没有让我感觉像是它的中心，请查看JSFIDLE，如果您没有看到相同的内容，请告诉我？您的代码似乎工作正常：）问题是，它工作不正常。我的页面上的所有内容似乎都崩溃了，我不知道为什么。是我，我回答时你没有发布CSS。我猜了一下。看我的小提琴。它就在中间fine@ConorReid我确实读过这个问题。我在你添加CSS之前发布了这个。。。幸运的是，你能告诉我为什么它会因为这个而断裂吗？
display:block; 

.logo1{
  display: block;
}