Question

我一直试图在我的代码中垂直居中一些图像，我终于得到了一个解决JSFiddle的解决方案但是当我尝试将相同的代码粘贴到html文件时，内容不会居中。这是小提琴：http://jsfiddle.net/kf8mksy0/，图像垂直居中：

但是当我尝试粘贴代码时：

<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0; 
                width: 100% !important;
                font-size: 100%;

                -webkit-text-size-adjust:none;

                background-color: #FAFAFA
            }
            #header {
                background-color: #FFF;
                height: 53px;
                padding: 19px 0;
                border-top: 6px solid #000; 
                border-bottom: 1px solid #000;
                min-width: 450px;
                margin: auto;
            }
            #header-content-left {
                float: left;
                padding: 0 0 0 5%;
                height: 53px;   
            }
            #header-content-center-1{
                float: right;
                height: 53px;
                line-height: 53px;
                padding: 0 2% 0 2%;
                border-left: 1px solid #000;
                margin: auto;
            }
            #header-content-center-2{
                float: right;
                height: 53px;
                line-height: 53px;
                padding: 0 2% 0 1%;
                margin: auto;
            }
            #header-content-right {
                float: right;
                height: 53px;
                padding: 0 5% 0 2%;
                border-left: 1px solid #000;    
            }
            #header-content-center-1 img, #header-content-center-2 img {
                display: inline-block;
                vertical-align: middle;

                line-height: normal;
            }
        </style>
    </head>
    <body>
        <div id="header">

                <div id="header-content-left"><img src="http://lorempixel.com/150/50/" width="175" height="53"/></div>

                <div id="header-content-right"><img src=            "http://lorempixel.com/150/50/" width="96" height="52" /></div>

                <div id="header-content-center-1"><img src="http://lorempixel.com/150/50/" width="78" height="12" /></div>
              <div id="header-content-center-2"><img src="http://lorempixel.com/150/50/" width="76" height="12" /></div>

                <div style="clear:both;"></div>
        </div>  
    </body>
</html>

小按钮不再垂直居中：

我在Chrome，Firefox和IE中尝试了相同的代码，因此我确信它不仅仅是浏览器范围内的。我错过了一些声明吗？我的最终html上有DOCTYPE，xlmns和meta标记声明，但它也没有在那里工作。

Div以JSFiddle为中心但不在html页面

0 个答案: