CODEWITHSUNDEEP
htmlcss
ItsVyzo
ItsVyzo

Reputation: 11

Position images relative to one another

So for my project I am trying to create a banner that goes across the top of the webpage that has the logo in the center of it, keeping it in the center whatever size the browser. I also want to position the second picture to be Xrem to the right of the logo. I currently am having trouble getting the second image to be positioned relative to the first that is centered. Here is my code:

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

I removed the links etc as I figured it would be easier to read and don't really matter.

Upvotes: 1

Views: 122

Answers (3)

Johannes
Johannes

Reputation: 67748

Define position: absolute for the a element which wraps the second image (not for the second image itself), as done with the following settings, which create a 2rem distance to the first image: The horizontal placement is 50% of the container width plus half of the first image's width plus the desired distance from the first image, all packed into a calc setting for left position:

(note that I erased some of your inline 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>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

You could make it simple using a pseudo.

  • For older browser use also text-align and set the margin from the center image.

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

  • For nowdays browsers , the flex properties will do fine

#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 commented and pen to play with

Upvotes: 0

Prabin Sapal
Prabin Sapal

Reputation: 346

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

Please try this I guess this is something you want and better to use external or internal css rather than using inline css

Upvotes: 1

Related Questions