center align two divs with image on right

Question

Need to center the arrow image to the right at all times. Currently the text is centered, but when it is two lines the imagediv is not centered.

 <div id="holding" style="margin:auto; position:relative; overflow: hidden; max-width: 666px; border-top: 1px solid #EBEBEB;"> <div class="job teamCleanString ' locationCleanString ' commitmentCleanString '">' <div style="float:left;"> <a class="job-title" style="color:#FF4F5D;" href="' link '" ">' title '</a></div>' <div id="imagediv " style=" right:5px;float:right;position:absolute; "> <a href=" ' link ' ""><img border="0" alt="W3Schools" src="https://uploads-ssl.webflow.com/5b3b89dea339e60649183848/5b3bc02bedb57a5c5b6b9a38_small-grey-arrow.svg" width="25" height="25"></a> </div> </div> <div style="clear:both; font-size:1px;"></div> </div> 

I tried using the following on the imagediv but sometime the text was two lines and not one so it caused problems:

 position:absolute;top:50%;

But it did not work. It is supposed to look like this, and I think the solution will be easy but I am struggling. Please help.

Answer 1

I would set display:flex and align-items:center in your css like so:

 job { display: flex; align-items:center; } 

  <div id="holding" style="margin:auto; position:relative; overflow: hidden; max-width: 666px; border-top: 1px solid #EBEBEB;"> <div class="job teamCleanString locationCleanString commitmentCleanString "> <div style="float:left;"> <a class="job-title" style="color:#FF4F5D;" href=' link '> title 1 </a></div> <div id="imagediv " style=" right:5px;float:right;position:absolute; "> <a href=" ' link ' ""> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M7.5 4.5L6.44 5.56 9.88 9l-3.44 3.44L7.5 13.5 12 9z"/></svg> </a> </div> </div> <div style="clear:both; font-size:1px;"></div> </div> <div id="holding" style="margin:auto; position:relative; overflow: hidden; max-width: 666px; border-top: 1px solid #EBEBEB;"> <div class="job teamCleanString locationCleanString commitmentCleanString "> <div style="float:left;"> <a class="job-title" style="color:#FF4F5D;" href=' link '> title 2</br>with two lines </a></div> <div id="imagediv " style=" right:5px;float:right;position:absolute; "> <a href=" ' link ' ""> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M7.5 4.5L6.44 5.56 9.88 9l-3.44 3.44L7.5 13.5 12 9z"/></svg> </a> </div> </div> <div style="clear:both; font-size:1px;"></div> </div> <div id="holding" style="margin:auto; position:relative; overflow: hidden; max-width: 666px; border-top: 1px solid #EBEBEB;"> <div class="job teamCleanString locationCleanString commitmentCleanString "> <div style="float:left;"> <a class="job-title" style="color:#FF4F5D;" href=' link '> title 3 </a></div> <div id="imagediv " style=" right:5px;float:right;position:absolute; "> <a href=" ' link ' ""> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M7.5 4.5L6.44 5.56 9.88 9l-3.44 3.44L7.5 13.5 12 9z"/></svg> </a> </div> </div> <div style="clear:both; font-size:1px;"></div> </div> 

JSFIDDLE:

https://jsfiddle.net/58ar1syb/12/

Answer 2

Flexbox is your friend.

Using the current Bootstrap 4 for the class sugar, your markup gets even simpler as well, and it's easy to see what your intent is right here

<div id="holding">
  <div class="job d-flex flex-row justify-content-between align-items-center">
    <a class="job-title" style=";" href="#"> machine learning engineer  </a>
    <a class="imgcontainer" href="#"><img border="0 " alt="W3Schools " src="https://uploads-ssl.webflow.com/5b3b89dea339e60649183848/5b3bc02bedb57a5c5b6b9a38_small-grey-arrow.svg " width="25 " height="25 "></a>
  </div>
  <div class="job d-flex flex-row justify-content-between align-items-center">
    <a class="job-title" style=";" href="#"> a really long job description linktext </a>
    <a class="imgcontainer" href="#"><img border="0 " alt="W3Schools " src="https://uploads-ssl.webflow.com/5b3b89dea339e60649183848/5b3bc02bedb57a5c5b6b9a38_small-grey-arrow.svg " width="25 " height="25 "></a>
  </div>
</div>

and your css would look like

#holding {
  margin:auto; 
  position:relative; 
  max-width: 666px; 
  border: 1px solid #EBEBEB; 
}
.job {
  border-top: 1px solid #EBEBEB;
  padding: 0.33em 0.66em;
}
.job-title {
  color:#FF4F5D;
  font-size: 3em;
}

demo codepen https://codepen.io/anon/pen/wXbWxY

you may find https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35 to be useful in helping you to understand how flexbox actually works. It can be a little confusing at first, but it's relatively simple.