Div 两侧垂直居中箭头

Question

我有两件事想不通。我试图将 div 框两侧的 image 中显示的两个箭头居中（无论高度如何，它们始终居中）。盒子是最小高度，我需要根据盒子的高度将箭头居中。

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

感谢您提供的任何帮助。

CSS

#recout{
text-align:center;
width: 80%;
margin: 0 auto;
text-align: center;
}
.recleft,
.recright{
    display: inline-block;
    width: 50px;
    min-height: 550px;
    margin: 5px;
}
.recin{
    background: #000000;
    display: inline-block;
    vertical-align:top;
    min-height: 550px;
    margin: 0;
    width: 550px;
    border-radius: 70px 70px 0 0;
}

HTML

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

Answer 1

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

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

对于移动视图的问题，您需要像这样设置 position: fixed;：https://jsfiddle.net/m9xqnh8y/1/

以及如果 .recin 身高增加的问题。我制作了一个包含 recleft、recin 和 recright 的 flexbox，这样其他 div 会自动占据整个高度，因此箭头也保留在中间。参见 here

Div 两侧垂直居中箭头

Center Arrows Vertically On Both Sides of Div

css

mobile

position

css-position

responsive-design