Question

我不能为我的生活得到一张图片来表达我的想法。图像应垂直位于父div（标题）内并具有响应性。我希望整个事情保持成比例，但目前还没有发生。有人可以帮忙吗？

＆＃13;

#headBar{
	background-color: #88a6cb;
    height: 10%;
    width: 100%;
    position: fixed;
    top: 0px;
    text-align: center;
}


#menubutton{
	height: 70%;
    float: right; 
    padding-right: 5%;
    margin:auto;
    vertical-align: middle;
  
}

＆＃13;

<div id="headBar">
		<a href="javascript:ReverseDisplay('dropmen')">
		<img id="menubutton" src="https://lh3.ggpht.com/XkKFmevjtyDntd5e0XeSssV1fukxNFuMvXRpMdXGZ56Ev5WPpggPrPFEi_2AUXFMbd4=w300"/>
		</a>
		</div>

＆＃13;

Answer 1

您可以将top与transform一起使用。 top会将圆圈定位在其父亲的高度的50％处，translateY将相对于自身定位，所以-50％的圆圈高度：

#menubutton{
    height: 70%;
    float: right; 
    padding-right: 5%;
    margin:auto;
    vertical-align: middle;
    position: relative;
    top: 50%;

    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

JSFiddle

注意：http://caniuse.com/#feat=transforms2d

Answer 2

这可能就这么容易吗？

#menubutton{
position: fixed;
height: 7%;
top: 1.5%;
right: 5%;
border: none;  
}

按钮高度保持在标题高度的70％，它与右边缘保持5％的距离，并且在标题中垂直居中。我认为那是你想要实现的目标吗？

如何让我的图像在标题内响应？

2 个答案: