时间戳

首页 > 解决方案 > 相对于彼此定位图像

html - 相对于彼此定位图像

问题描述

因此，对于我的项目，我正在尝试创建一个横幅，该横幅横跨网页顶部，其中心有徽标，无论浏览器大小如何，都将其保持在中心。我还想将第二张图片定位为rem徽标右侧的X。我目前无法让第二张图像相对于居中的第一张图像进行定位。这是我的代码：

HTML：

<div id= "bannerTop" style="position:relative"; background-color: #293038; height: 2.5rem; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #293038;" class="center">
    <img src="__________" style="height:1.5rem; width:4.8rem; padding-top:.5rem;position:relative;" class="center">
    <a href="_______"><img src="________" style="height:1.7143rem; width:1.75rem; padding-top:.5rem; position:absolute; top:0; left:20rem"></a>
</div>

CSS：

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我删除了链接等，因为我认为它会更容易阅读并且并不重要。

标签： htmlcss

解决方案

#bannerTop {
  background-color: #293038;
  height: 2.5rem; 
  width: 100%;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #293038;
  text-align: center;
}
.center {
  height:1.5rem;
  width:4.8rem;
 padding-top:.5rem;
  display:inline;
}
<div id= "bannerTop">
    <img src="__________" class="center">
    <a href="_______"><img src="________" style="height:1.7143rem; width:1.75rem; padding-top:.5rem;"></a>
</div>

请试试这个我想这是你想要的东西，最好使用外部或内部 css 而不是使用内联 css

推荐阅读