CODEWITHSUNDEEP
htmlcsscenter
Arus23
Arus23

Reputation: 89

two divs lying horizontally centered in wrapping div

I'm trying to create an html element like in the image. Buttons are fine, but i can't set two divs below properly. Tried many combinations of floats, position, display etc. but nothing worked. I'm not allowed to change the navbar css.enter image description here

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

Upvotes: 0

Views: 104

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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

Upvotes: 1

Related Questions