Html 如何对齐div以显示一个看起来像搜索框的框

我正在尝试创建一个包含两个内部

DIV

的外部

DIV

布局

两个内部

DIV

s都需要垂直居中

其中一个内部

DIV

s需要固定在外部

DIV

的右边缘（有少量px边距）

另一个内部

DIV

需要在整个外部

DIV

中水平居中

像这样的

___________________________
|                         |
|[     some text      ][S]|
|_________________________|

“some text”DIV可以放在“S”DIV后面，也可以放在它旁边；没关系

我不能使用

：：after

，因为'S'

DIV

需要附加一个

onClick

事件（它实际上是

DIV

中的一个搜索按钮）

我已经尝试了很多不同的方法来实现这一点，但没有什么是完全正确的

现在我有以下使用

display的功能：flex

，虽然很接近，但并不完全正确

#结果框{
边框：1px点黑色；
边界半径：5px；
边缘顶部：25px；
边缘底部：15px；
填充物：5px；
填充顶部：10px；
背景色：rgba（255、255、255、0.2）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#结果文本{
字体系列：myFont；
字体大小：2.8vw；
字母间距：0.18em；
}
#搜索按钮{
字体大小：1.5vw；
光标：指针；
填充：20px；
}

这是
一些
文本
🔎

要保持文本中心并将搜索图标设置在右侧，只需将margin:auto设置为文本：

#resultText {
  font-family: myFont;
  font-size: 2.8vw;
  letter-spacing: 0.18em;
  padding-left: calc(1.5vw + 40px); /** To compensate icon size on the right we add padding-left similar width **/
  margin: auto;
}

演示

#结果框{
边框：1px点黑色；
边界半径：5px；
边缘顶部：25px；
边缘底部：15px；
填充物：5px；
填充顶部：10px；
背景色：rgba（255、255、255、0.2）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#结果文本{
字体系列：myFont；
字体大小：2.8vw；
字母间距：0.18em；
左侧填充：calc（1.5vw+40px）；/**为了补偿右侧的图标大小，我们添加了类似宽度的左侧填充**/
保证金：自动；
}
#搜索按钮{
字体大小：1.5vw；
光标：指针；
填充：20px；
}

这是
一些
文本
🔎

您正在搜索：

contenteditable=“true”

？不，对不起。问题与编辑内容无关。。。这是关于搜索图标分区的对齐。我将编辑问题以使其更清晰。好的，这只是一个奇迹，请看一看答案