html - 在低分辨率下将带有标题的 Logo 居中

Question

这是我的代码，我添加了这个外部 div 并尝试了不同的方法，正如您在样式中看到的那样，试图将 Logo 与补丁标题居中

 echo '<div style="display: block; margin-left: auto; margin-right: auto;"><a       
 href="index.php"><div id="logo"></div></a>';
                echo '<h1 class="patch">PATCH ';
                    echo $patch.'</h1></div>

这也是 css 我有最大宽度 639 px 和更小的问题，这就是它的外观 http://i.imgur.com/fsV1vnc.png

#logo {
            float: left;
            width: 37px;
            height: 37px;

            background-image: url("../assets/logo/logo.png");
            background-size: contain;
        }
        #logo:hover{
            background-image: url("../assets/logo/logo_inverted.png");
            background-size: contain;
            transition: all 500ms ease; 
        }

@media only screen
        and (min-width: 640px)
        {
        .patch{
            float: left;
        }
        #logo{
            margin-right: 5px;
        }
}
@media(max-width: 639px){
        #logo{
            float: none;
            }
        .patch{
            float: none;
        }}

Answer 1

添加:

width: 100%;
text-align: center;

到.patch，一切就绪。如果不需要，为什么要在文本上使用边距自动？