Question

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

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;
}

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

Answer 1

#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

Answer 2

为position: absolute元素定义a，其中包含第二个图像（不是第二个图像本身），与以下设置一样，创建与第一个图像的2rem距离：水平展示位置是容器宽度的50％加上第一张图片宽度的一半加上距离第一张图片的所需距离，所有这些都被打包到calc位置的left设置中：

（请注意，我删除了一些内联的stlyes）

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#bannerTop a {
  display: inline-block;
  width: auto;
  position: absolute;
  top: 0px;
  left: calc(50% + 4.4rem);
}

<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="https://placehold.it/80x15/fa0" style="height:1.5rem; width:4.8rem; padding-top:.5rem;" class="center ">
  <a href="_______ "><img src="https://placehold.it/40x15/0fa" style="height:1.7143rem; width:1.75rem; padding-top:.5rem;"></a>
</div>

Answer 3

你可以使用伪。

对于较早的浏览器，也可以使用text-align并从中心图像设置margin。

＆＃13;

#bannerTop {
  position: relative;
  /* show midlle on x & y axis */
  background-image: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.25) 50%);
  background-color: #293038;
  height: 2.5rem;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #293038;
  /* css 2.1 method */
  text-align: center;
  line-height: 2.5rem;
}

a,
img,
#bannerTop:before {
  vertical-align: middle;/* tells itself */
}

.center .center {
  height: 1.5rem;
  width: 4.8rem;
  margin: 0 5rem /* set margin here */
}

/* create pseudo and reset line-height */
#bannerTop:before,
a {
  content: '';
  display: inline-block;
  line-height: 0.5em
}

/* give pseudo same size as right image to balance equally */
.center a img,
#bannerTop:before {
  height: 1.7143rem;
  width: 1.75rem;
}

＆＃13;

<div id="bannerTop" class="center">
  <img src="http://dummyimage.com/100" style="" class="center">
  <a href="#"><img src="http://dummyimage.com/100"></a>
</div>

＆＃13;

对于现在的浏览器，flex属性可以正常使用

＆＃13;

#bannerTop {
/* show middle */
  background-image: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.25) 50%);
  
  
  background-color: #293038;
  height: 2.5rem;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #293038;
  
  /* css 3 mehod */
  display: flex;
  align-items: center;
  justify-content: center;
}

.center .center {
  height: 1.5rem;
  width: 4.8rem;
  margin: 0 5rem/* margins here */
}

/* create pseudo*/
#bannerTop:before {
  content: '';
  display: inline-block;
}
/* size pseudo too */
.center a img,
#bannerTop:before {
  height: 1.7143rem;
  width: 1.75rem;
}

＆＃13;

<div id="bannerTop" class="center">
  <img src="http://dummyimage.com/100" style="" class="center">
  <a href="#"><img src="http://dummyimage.com/100"></a>
</div>

＆＃13;

CSS评论和 pen to play with

将图像相对于彼此定位

3 个答案: