javascript - 如何固定输入的位置，使其始终位于屏幕居中但其大小可以更改的元素下方？

Question

我的 UI 中有一个名为 SkyElement 的元素，它始终在我的 UI 中垂直和水平居中。我还有一个输入，称为 PencilInput，我希望它始终位于 SkyElement 下方。

在 UI 中，用户可以更改 SkyElement 的大小(宽度和高度)，我希望 PencilInput 位于 下方>SkyElement，无论大小。

现在，无论大小如何，PencilInput 都显示在 SkyElement 上方。

在我的render 函数中:

<div className="left-side">
    <SkyElement />

    <PencilInput />
</div>

PencilInput 的 HTML:

<div className='pencil-input-holder'>
    <div className='pencil-svg' />

    <input className='pencil-input' onChange={this.handleChange} value={this.state.title} />
</div>

在我的 CSS 中:

@mixin absolute-center {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left-side {
    background: linear-gradient(180deg, #000000 0%, #205F8A 45.56%, #8852BB 100%);
    position: relative;

    .element {
        @include absolute-center;
        transform: scale(1.3);
        transform-origin: center center;
    }
}

.pencil-input-holder {
    border-bottom: 4px dashed rgba(255, 255, 255, 0.3);
    width: 50%;
    margin: 0 auto;

    .pencil-svg {
        background: url('../images/pencil.svg') center center no-repeat;
        width: 27px;
        height: 39px;
        display: inline-block;
        position: relative;
        top: 60px;
        left: 20px;
    }
}

input.pencil-input {
    position: relative;
    font-family: 'GT America Compressed Regular';
    text-align: center;
    font-size: 59px;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    left: 50%;
    transform: translateX(-50%);
    border: none;

    &:focus { outline: none; }
}

如有任何帮助，我们将不胜感激。谢谢!

编辑:添加了 SkyElement 的 render() block

除了下面的代码和上面的 .left-side .element 代码之外，这是 SkyElement

的全部 css

render() {
    const { connectDragSource, isDragging, hideSourceOnDrag, transformElement, top, left } = this.props;

    // hide on drag in slot view
    if (isDragging && hideSourceOnDrag) {
        return null;
    }

    const halfSize = this.props.size / 2;
    const transform = transformElement ? `translate(-50%, -50%)` : '';

    const style = {
        width: `${this.props.size}px`,
        height: `${this.props.size}px`,
        borderRadius: '50%',
        background: this.radialGradient(),
        opacity: isDragging ? 0.2 : this.props.opacity,
        boxShadow: this.boxShadow(),
        transform,
        transition: 'background 0.2s',
        position: 'relative',
        top,
        left,
    };

    return connectDragSource(
        <div onClick={this.editElement} className='element' style={style}>
            {
                this.props.labelPosition
                    ? <ElementLabel title={this.props.title} position={this.props.labelPosition } />
                    : null
            }
        </div>
    );
}

Answer 1

我在您当前的解决方案中看到一个问题，您的 @mixin设置不正确。它产生 2 transform属性，这导致只应用一个属性:

transform: translate(-50%, -50%);
transform: scale(1.3);

这应该写成:

transform: translate(-50%, -50%) scale(1.3);

但是，这不是唯一的问题。我的建议是包装 <SkyElement/>和 <PencilInput/>在包装器组件/元素中水平/垂直居中元素组。

<div className="left-side">
  <CenterElements>
    <SkyElement />
    <PencilInput />
  </CenterElements>
</div>

或

<div className="left-side">
  <div class="center">
    <SkyElement />
    <PencilInput />
  </div>
</div>

此元素/组件将包含水平和垂直居中的样式。

我尝试使用现有的 CSS 来展示如何做到这一点。如果您愿意，需要将其转换回 Sass。基本思想是包装 <SkyElement/>和 <PencilInput/>在包装元素中并垂直居中。然后您可以定位 .pencil-input-holder元素使用 position: absolute;在那里面。 <SkyElement/>的大小不会影响 <PencilInput/> 的大小元素与此实现。

沿着这些线的东西:

html,
body {
  height: 100%;
  min-height: 100%;
}
.left-side {
  background: linear-gradient(180deg, #000000 0%, #205F8A 45.56%, #8852BB 100%);
  position: relative;
  height: 100%;
  width: 100%;
}

.element-container {
  position: relative;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.left-side .element {
  display: inline-block;
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255,255,255, 0.5);
}

.pencil-input-holder {
  border-bottom: 4px dashed rgba(255, 255, 255, 0.3);
  width: 50%;
  position: absolute;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.pencil-input-holder .pencil-svg {
  background: url("../images/pencil.svg") center center no-repeat;
  width: 27px;
  height: 39px;
  display: inline-block;
  position: relative;
  top: 60px;
  left: 20px;
}

input.pencil-input {
  position: relative;
  font-family: 'GT America Compressed Regular';
  text-align: center;
  font-size: 59px;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  left: 50%;
  transform: translateX(-50%);
  border: none;
}

input.pencil-input:focus {
  outline: none;
}

<div class="left-side">
  <div class="element-container">
    <div class="element" style="position: relative;">
      Sky
    </div>
    <div class="pencil-input-holder">
      <div class="pencil-svg">
        Pencil
      </div>

      <input class="pencil-input" onChange={this.handleChange} value={this.state.title} />
    </div>
  </div>
</div>