HTML/CSS-如何将“sticky”和“inline block”两个div居中？

我有以下代码：。标题是一个有粘性的元素，一切都很好。但是，我想将标题和图标居中，因此我添加了一个包装器div:。这里的问题是，标题现在粘在包装器div上，而不是

content

div上。如何确保在标题和图标居中的情况下定位有效

下面是来自第二个JSFIDLE的代码：

HTML:

---

编辑：我只希望标题是粘性的，而不是图标使包装纸粘性，而不是标题

.menu-wrapper {
  display: inline-block;
  border: thin red solid;
  margin-left: 50%;
  transform: translate(-50%, 0);
  position: sticky;
  top: 15px;
}

---

您只需使用常规文本对齐即可实现居中。像这样：

.content{
文本对齐：居中；
}
.内容>*{
文本对齐：左对齐；
}
.菜单{
位置：粘性；
显示：内联块；
宽度：150px；
顶部：15px；
背景色：#000000c7；
边界半径：10px；
填充顶部：14px；
填充底部：14px；
左侧填充：25px；
右边填充：25px；
边缘底部：10px；
}
.菜单标题{
颜色：白色；
字体系列：“机器人”；
字号：18px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
边际：0px；
左边距：15px；
}
.图标{
显示：内联块；
宽度：50px；
高度：自动；
左边距：50像素；
}

标题
填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

填充文本

哦，我应该提到图标不应该是粘性的。刚刚编辑了我的帖子您需要在这里、您的问题中以及任何第三方网站上发布一个帖子。@Rob刚刚添加了第二个JSFIDDLE中的代码注意：

标记不使用，也不需要结束斜杠，而且在HTML中从来没有过。@Rob哦，我的错，它在React中工作，我只是将代码移到另一个位置，并将

className

更改为

class

.menu-wrapper {
  display: inline-block;
  border: thin red solid;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.menu {
  position: sticky;
  display: inline-block;
  width: 150px;
  top: 15px;
  background-color: #000000c7;
  border-radius: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 10px;
}

.menu-title {
  color: white;
  font-family: "Roboto";
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0px;
  margin-left: 15px;
}

.icon {
  display: inline-block;
  width: 50px;
  height: auto;
  margin-left: 50px;
}

.menu-wrapper {
  display: inline-block;
  border: thin red solid;
  margin-left: 50%;
  transform: translate(-50%, 0);
  position: sticky;
  top: 15px;
}