两个 div 水平居中环绕 div

Question

我正在尝试创建如图中所示的 html 元素。按钮很好，但我无法正确设置下面的两个 div。尝试了浮动、位置、显示等的多种组合，但没有任何效果。我不允许更改导航栏 css.

#navbar5 {
  float: left;
  width: 35%;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div id="one"> xxxxxxx </div>
  <div id="two"> yyyyyyy </div>
</div>

Answer 1

#navbar5 {
  width: auto;
  text-align: center;
  float: left;
}

.simple_text {
  display: flex;
  justify-content: center;
}

#two,
#navbar5 button:last-of-type {
  margin: 0 0 0 10px;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div class="simple_text">
    <div id="one"> xxxxxxx </div>
    <div id="two"> yyyyyyy </div>
  </div>
</div>

两个 div 水平居中环绕 div

two divs lying horizontally centered in wrapping div

html

css

center