CODEWITHSUNDEEP
javascripthtmlcss
dixie motors
dixie motors

Reputation: 37

center align two divs with image on right

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>

enter image description here 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.

enter image description here

Upvotes: 0

Views: 222

Answers (2)

Rowan Baker-French
Rowan Baker-French

Reputation: 449

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/

Upvotes: 1

WebDragon
WebDragon

Reputation: 937

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.

Upvotes: 1

Related Questions