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

Question

我一直在尝试在我的代码中将一些图像垂直居中，我终于找到了一个适用于 JSFiddle 的解决方案，但是当我尝试将相同的代码粘贴到 html 文件时，内容不是居中。这是 fiddle：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 标签声明，但它在那里也不起作用。

Answer 1

JSfiddle 使用 html5 声明。您可以从左侧的 fiddle 选项更改它。我在一个简单的 html 页面中使用了这段代码，并且在 chrome.

中工作正常

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            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>

更新：

How "DOCTYPE" affects the rendering of HTML elements on different browsers?

Different browsers render the different tags differently. Whenever we define a DOCTYPE, it means we are telling to the browser that HTML Standards of the specified DOCTYPE have been used.

Doctype info

Answer 2

使用标准 HTML5 文档类型。这似乎对我安装的 IDEs/browsers 有效，但我不确定为什么 4.01/etc.. 不起作用。

编辑：啊胡说八道，白痴发现了它...好搭档！

列表项

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

Div centers on JSFiddle but not on html page

html

css

vertical-alignment

jsfiddle