html – 顶部对齐文本与旁边的固定图像？

我的页面上有一个固定的图像,始终垂直居中.它旁边是一个可滚动的文本墙,我总是希望在页面加载时与固定图像的顶部垂直对齐.如此处所示(红色条表示它是如何最高的)：

现在,如代码片段所示,我有右侧div与填充顶部：60px适用于我的电脑屏幕.但第二次我切换到手机或平板电脑这不再有效.

如何在页面加载时这样做,文本的顶部始终与图像的顶部对齐？

.left-div {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 60%
}

.left-div>img {
  height: 100%;
}

.right-div {
  margin-left: 250px;
  padding-right: 10px;
  padding-top: 60px;
}

<div class="left-div">
  <img src="https://cdn1.iconfinder.com/data/icons/apple-products-icons/100/apple-outlined_iphone_6-2-512.png">
</div>
<div class="right-div">
  <p>
    I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.
  </p>
  <p>
    Five score years ago,a great American,in whose symbolic shadow we stand today,signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering
    injustice. It came as a joyous daybreak to end the long night of captivity.
  </p>
  <p>
    But one hundred years later,the Negro still is not free. One hundred years later,the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. One hundred years later,the Negro lives on a lonely island
    of poverty in the midst of a vast ocean of material prosperity. One hundred years later,the Negro is still languished in the corners of American society and finds himself in exile in his own land. So we have come here today to dramatize an shameful
    condition.
  </p>
  <p>
    In a sense we've come to our nation's Capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence,they were signing a promissory note to which every American was to
    fall heir.
  </p>
  <p>
    This note was a promise that all men,yes,black men as well as white men,would be guaranteed the unalienable rights of life,liberty,and the pursuit of happiness.
  </p>
</div>

解决方法

左侧图像的高度是窗口高度的60％.因此,您应该为正确的div添加20％的填充顶部

.right-div {
  padding-top: 20vh;
}

Here is a sample

编辑

如果要以像素(或任何其他单位)设置图像高度,可以使用CSS calc()函数计算填充

.left-div {
  height: 125px;
}

.right-div {
  padding-top: calc((100vh - 125px) / 2);
}

原文地址：https://www.jb51.cc/html/242681.html