Question

我有两个我无法弄清楚的项目。我试图将div框两侧的image中显示的两个箭头居中（无论高度是多少，它们总是居中）。盒子是最小高度，我需要箭头居中，具体取决于盒子的高度。

此外，当媒体屏幕启动时，无论用户在哪里滚动，我都希望它们始终显示在左侧和右侧。当用户滚动时，我不知道如何将它们保持在原位。

感谢您提供的任何帮助。

CSS

<div id= "recout">

<div class= "recleft"> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
  <circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
  <g>
    <g>
      <path fill="#FFFFFF" d="M31.2,8.4c1,0,2,0.4,2.8,1c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.2-1.4,2.9l-11.8,10l11.8,10
        c0.9,0.7,1.4,1.8,1.4,2.9s-0.5,2.1-1.4,2.9c-1.5,1.3-4,1.3-5.5,0L13.2,28.1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.1,1.4-2.9
        L28.4,9.4C29.2,8.8,30.2,8.4,31.2,8.4z"/>
    </g>
  </g>
  </svg>
</div>

<div class= "recin"></div>

<div class= "recright">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
  <circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
  <g>
    <g>
      <path fill="#FFFFFF" d="M20,42c-1,0-2-0.4-2.8-1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.2,1.4-2.9l11.8-10l-11.8-10
        c-0.9-0.7-1.4-1.8-1.4-2.9s0.5-2.1,1.4-2.9c1.5-1.3,4-1.3,5.5,0L38,22.3c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.1-1.4,2.9L22.7,41
        C22,41.7,21,42,20,42z"/>
    </g>
  </g>
  </svg>
</div>

HTML

inout

Answer 1

如果我理解你，你希望svg分别在.recleft和.recright中垂直居中。

要做到这一点，请在svg周围的包装器上使用position: absolute（将它直接应用到svg时看起来很奇怪），设置top: 50%，这将使div居中，最后应用{{1到父级，以便包装器div相对于此父级绝对定位。见JSFiddle

对于移动视图的问题，您需要设置position: relative，如下所示：https://jsfiddle.net/m9xqnh8y/1/

对于position: fixed;高度增加的问题。我创建了一个包含.recin，recleft和recin的弹散框，这样其他div会自动占据整个高度，因此箭头也会保留在中间。见here

在Div的两侧垂直居中箭头

1 个答案: