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

我的UI中有一个称为SkyElement的元素，该元素始终在UI中垂直和水平居中。我也有一个输入，叫做PencilInput，我想一直保持在SkyElement之下。

在用户界面中，用户可以更改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; }
}

任何帮助，将不胜感激。谢谢!

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

除了下面的代码和上面的.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>
    );
}

最佳答案

我发现您当前的解决方案有一个问题，您的@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>