如何固定一个输入框的位置，使其始终位于屏幕中心的元素下方，但其大小可以改变？

Question

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

在UI中，用户可以更改的大小（宽度和高度），我希望无论大小如何，都位于下方。

目前，正在显示在上方，无论大小如何。

在我的render函数中：

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

    <PencilInput />
</div>

< p > 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()代码块

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

- Zack Shapiro

---

你能分享一个SkyElement输出和相关的CSS的例子吗？ - Brett DeWoody

@BrettDeWoody 添加了 - Zack Shapiro

听起来 <SkyElement /> 和 <PencilInput /> 元素有些相互关联，至少在视觉上是这样的 - 因为您总是希望输入位于 SkyElement 下方。这正确吗？ - Brett DeWoody

没错。我尝试将“PencilInput”放到“SkyElement” HTML中，但输入框显示在“SkyElement”的内部而不是下方。基本上无论宽度/高度如何（可以通过此视图中的滑块更改），我总是希望输入框位于“SkyElement”下方。 - Zack Shapiro

因为如果我把 PencilInput 放在 SkyElement 里面，它会占用 SkyElement 的宽度，而我不希望这样，因为输入值可能比 SkyElement 更宽。 - Zack Shapiro

Flexbox是你的好朋友。另外，也可以查看CSS Grid（这是我用来完成类似任务的工具）。 - rimraf

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>

- Brett DeWoody

Answer 2

我建议将它们包装起来并应用 flex。

 <div style={{divstyle}}>
   <component1/>
   <component2/> 
 </div>

divstyle = {
  display:'flex',
  justify-content:'center',
  align-items:'center',
} 

- xSkrappy

Answer 3

使用 display: flex 怎么样？与这个 centerBox div 一起使用。

.centerBox {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

完整的示例在这里： https://codepen.io/kkpoon/pen/rzNraz

- kkpoon