HTML / CSS - Как мне отцентрировать два div'а, которые являются «липкими» и «встроенными в блок»?

Question

У меня есть следующий код: JSFiddle . Название является липким элементом, и все работает отлично. Тем не менее, я хотел бы центрировать заголовок и значок, поэтому я добавил обёртку 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

Вы можете просто использовать обычное выравнивание текста, чтобы получить ваше центрирование. Как это:

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

Answer 2

Сделайте обертку липкой вместо заголовка.

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

https://jsfiddle.net/m0khwxan/