额外信息 - 当浏览器尺寸低于880PX时，它就在中心，当它在上面时 - 它不是。

Question

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

所以这里是图像的基本代码：

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

确实很基本。这里的CSS并不是图像的中心，它所做的就是将图像向右移动一点点（约30:70）

抱歉我意外地按下了输入按钮并预先发布了，这里是CSS：

.logo1 {
    border-radius: 100%;
    border: 4px solid orange;
    display: block !important;
    width: 150px;
    margin: 0 auto;
}

.logo-con {
    width: 100%;
    display: block !important;
    margin: 0 auto;
}

当我这样做时会发生什么 http://i.gyazo.com/6a547a51c833aba47e8e8697eef1de46.png

额外信息 - 当浏览器尺寸低于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

body, html, .main {
    margin: 0;
    padding: 0;
}

/* Header Open */

.main{
    background-color: #6E696B;
    height: auto;
    padding-bottom: 15px;
}

.g-site-title {
    font-family: 'Oxygen','Arial';
    color: white;
    position: relative;
    top: 5px;
    margin-left: 45px;
}

ul {
    margin-right: 50px;
    float: right;
    margin-top: 5px;
}

li {
    display: inline-block;
    list-style-type: none;
    margin-right: 35px;
    font-family: 'Oxygen','Arial';
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

li.active {
    background-color
}

a {
    color: white;
    text-decoration: none;
}

li:hover {
    background-color: orange;
}

.logo1 {
    border-radius: 100%;
    border: 4px solid orange;
    display: block !important;
    width: 150px;
    margin: 0 auto;
}

.logo-con {
    width: 100%;
    display: block !important;
    margin: 0 auto;
}

Answer 1

您需要添加此CSS：

display:block;

这需要应用于图像。

Answer 2

没有CSS，但如果您遇到margin: auto 0问题，则最有可能因为img标记默认为inline，并且会忽略该规则。设置：

.logo1{
  display: block;
}

CSS发布后更新

看起来很好：

FIDDLE

NEW UPDATE

这是您标题中的浮动问题。您需要使用clearfix或overflow:hidden的父.main来清除您的花车。{/ 1}}

NEW FIDDLE

Answer 3

您的overflow:hidden课程需要.main。我已经更新了我的JSFiddle。 http://jsfiddle.net/tv9erov7/1/

div中的图像不居中（HTML / CSS）使用Margin：0 auto;

额外信息 - 当浏览器尺寸低于880PX时，它就在中心，当它在上面时 - 它不是。

3 个答案: