Расположите изображения относительно друг друга

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

Определите position: absolute для элемента a, который оборачивает второе изображение (не для самого второго изображения), как это сделано со следующими настройками, которые создают расстояние 2rem до первого изображения: горизонтальное размещение составляет 50%ширины контейнера плюс половина ширины первого изображения плюс желаемое расстояние от первого изображения, все упаковано в настройку calc для позиции left:

(обратите внимание, что я удалил некоторые из ваших встроенных стилей)

.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 2

Вы можете сделать это просто, используя псевдо.

• Для более старых браузеров используйте также text-align и установите margin из центрального изображения.

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

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

• Для современных браузеров свойства flex подойдут

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

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

с комментариями CSS и ручкой для игры с

Answer 3

#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