HTML/CSS - 我怎样才能让两个 div 居中，这两个 div 分别是 `sticky` 和 `inline-block`？

Question

我有以下代码：JSFiddle. The title is a sticky element and everything works fine. However, I would like to center the title and icon, so I added a wrapper div: JSFiddle。这里的问题是标题现在粘在包装 div 而不是 content div 上。如何确保定位有效，同时让标题和图标居中？

这是来自第二个 JSFiddle 的代码：

HTML:

<div class="content">

  <div class="menu-wrapper">

    <div class="menu">

      <p class="menu-title">Title</p>

    </div>

    <img src="https://apixel.me/static/apixel.png" class="icon" />

  </div>

  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>

</div>

CSS:

.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;
}

编辑：我只希望标题具有粘性，而不是图标

Answer 1

让包装纸变粘，而不是标题。

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

https://jsfiddle.net/m0khwxan/

Answer 2

您可以只使用常规文本对齐方式来居中。像这样：

.content {
  text-align:center;
}
.content > * {
  text-align:left;
}

.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;
}

<div class="content">



    <div class="menu">

      <p class="menu-title">Title</p>

    </div>

    <img src="https://apixel.me/static/apixel.png" class="icon" />



  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>

</div>

HTML/CSS - 我怎样才能让两个 div 居中，这两个 div 分别是 `sticky` 和 `inline-block`？

HTML/CSS - How can I center two divs that are `sticky` and `inline-block`?

html

css

position