时间戳

首页 > 解决方案 > 将两个 div 与右侧的图像居中对齐

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

问题描述

需要始终将箭头图像居中向右。目前文本居中，但当它是两行时，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%;

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

在此处输入图像描述

标签： javascripthtmlcss

解决方案

我会在你的 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/

推荐阅读