Question

始终需要将箭头图像居右。当前文本居中，但是当它为两行时，imagediv未居中。

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

我尝试在imagediv上使用以下内容，但有时文本是两行而不是一行，因此会引起问题：

 position:absolute;top:50%;

但是没有用。它应该看起来像这样，我认为解决方案会很容易，但我很努力。请帮忙。

Answer 1

我将在CSS中设置display：flex和align-items：center：

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是您的朋友。

使用当前的Bootstrap 4来制作糖类，标记也将变得更加简单，并且很容易在这里看到您的意图

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

您的CSS看起来像

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

演示codepen https://codepen.io/anon/pen/wXbWxY

您可能会发现https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35对帮助您了解flexbox的实际工作方式很有用。刚开始时可能会有些混乱，但这相对简单。

居中将两个div与右侧的图像对齐

2 个答案: