Question

我设计了一个Web应用程序的外观和布局，其目标是响应式设计，对不同的设备大小进行尽可能小的更改（媒体查询）。

我已经把我能想到的最小的例子放在一起，我在里面展示了一个带有一个vcenter-div的header-div。（实际上，我有更多的内联块列。）无论如何，我想垂直对齐（居中）所有div-inline-blocks。在演示中，我在.header中有一个伪内联块：在.vcenter中有另一个内联块。

在vcenter-block中，我有一个Google徽标图片。考虑到响应性，我希望Google图像的大小是.header-div的20％（不是.header .vcenter-div，因此.header .vcenter-div上没有给出高度）。

这有时候工作得很好，有时候不行！在JSFiddle上，我有一个不起作用的演示： https://jsfiddle.net/cfneikter/sy5w69f1/7/

在另一台服务器上，我有相当的SAME演示，它可以在哪里工作： https://app04.azurewebsites.net/test.html

这让我疯了。 Safari和Google Chrome的行为都相同。但有什么区别？：）

CSS非常简单：

body, html {
    height: 100%;
    width: 100%;
}

.header {
    height: 20%;
    font-size: 1.0em;
    position: relative;
    background-color: #cacaca;
}

.header:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.header .vcenter {
    display: inline-block;
    vertical-align: middle;
    width: 35%;
    text-align: left;
    color: #acacac;
}

.header .vcenter img {
    height: 20%; /* why is percent isn't working (sometimes)!?*/
    width: auto;
}

HTML也是如此：

<div class="header">
    <div class="vcenter">
        <img src="some_image.png" />
    </div>
</div>

Answer 1

在vcenter div上添加height: 100%

＆＃13;

 
body, html {
height: 100%;
width: 100%;
}

.header {
height: 20%;
font-size: 1.0em;
position: relative;
background-color: #cacaca;
}

.header .vcenter {
display: inline-block;
width: 35%;
text-align: left;
color: #acacac;
height: 100%;
}

.header .vcenter img {
height: 20%; /* why is percent isn't working!?*/
width: auto;
position: absolute;
top: 50%;
transform: translatey(-50%);
}

＆＃13;

<div class="header">
	<div class="vcenter">
		<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
	</div>
</div>

＆＃13;

修改使用flex

执行所需操作的另一种方法

＆＃13;
＆＃13;
body, html { height: 100%; width: 100%; } .header { height: 20%; font-size: 1.0em; background-color: #cacaca; } .header .vcenter { width: 35%; display: flex; align-items: center; text-align: left; color: #acacac; height: 100%; } .header .vcenter img { height: 20%; /* why is percent isn't working!?*/ width: auto; }
＆＃13;
<div class="header"> <div class="vcenter"> <img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </div> </div>
＆＃13;
＆＃13;
＆＃13;

响应标头表现得很奇怪

1 个答案: