HTML   发布时间:2022-04-15  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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);
}

大佬总结

以上是大佬教程为你收集整理的html – 顶部对齐文本与旁边的固定图像?全部内容,希望文章能够帮你解决html – 顶部对齐文本与旁边的固定图像?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。