Selected Div Will Not Center

Question

I'm a newbie of course. I apologize before hand if anything I say sound like a no brainer however I'm having technical difficulties while Youtube and research is no help. I'm seeking to make my web design responsive. In doing so, I've attempted countless times to CENTER (commun) to no avail. At the moment, (commun) is aligned to the left (obviously by default). I have no idea if it was an error I committed before or during placing the element. Can anyone help me move this element to the center?

Thanks In Adavance

.boom {
  position: relative;
  padding-left: 5px;
  bottom: 112px;
}

.think p {
  display: inline;
}

.think {
  width: 90%;
  text-align: center;
  padding: 5px;
  background-color: black;
  color: #F2F2F2;
  margin-top: 20px;
}

.xit button {
  color: white;
  padding: 5px 70px;
  background-color: forestgreen;
  border-radius: 12px;
  font-family: istok-web;
}

.xit button:hover {
  background-color: white;
  color: green;
}

<div class="holdon">
  <a href="www.hotmail.com" class="boom">
    <img src="IMAGES/GOOOOOOOO.png" alt="dummy" height="100px" width="100px">
  </a>
</div>


<div class="rapper">
  <div class="commun">
    <div class="think">
      <p>eipuriepauip uipeojiupeiurqiewp uipeuiepuirepw uirepqrueiqp ufiepfipeiwp euipuqieupriqewp</p>
      <div class="xitf">
        <a class="xit" href="https://www.freecodecamp.org/">
          <button type="button">SIGN UP</button>
        </a>
      </div>
    </div>
  </div>
</div>

Try one of these solutions. Personally I'd go with the flexbox [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — AStombaugh, Jun 26 '22 at 18:38

score 0 · Accepted Answer · answered Jun 26 '22 at 18:37

Just adding auto margins on left an right of think class might work.

.boom {
  position: relative;
  padding-left: 5px;
  bottom: 112px;
}

.think p {
  display: inline;
}

.think {
  width: 90%;
  text-align: center;
  padding: 5px;
  background-color: black;
  color: #F2F2F2;
  margin-top: 20px;
  margin-left: auto; 
  margin-right: auto;
}

.xit button {
  color: white;
  padding: 5px 70px;
  background-color: forestgreen;
  border-radius: 12px;
  font-family: istok-web;
}

.xit button:hover {
  background-color: white;
  color: green;
}

<div class="holdon">
  <a href="www.hotmail.com" class="boom">
    <img src="IMAGES/GOOOOOOOO.png" alt="dummy" height="100px" width="100px">
  </a>
</div>


<div class="rapper">
  <div class="commun">
    <div class="think">
      <p>eipuriepauip uipeojiupeiurqiewp uipeuiepuirepw uirepqrueiqp ufiepfipeiwp euipuqieupriqewp</p>
      <div class="xitf">
        <a class="xit" href="https://www.freecodecamp.org/">
          <button type="button">SIGN UP</button>
        </a>
      </div>
    </div>
  </div>
</div>

score -2 · Answer 2 · answered Jun 26 '22 at 18:21

-2

You can try the flex layout. It will surprise you and is easy to use https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

answered Jun 26 '22 at 18:21

liangdapang

193
10

Selected Div Will Not Center

2 Answers2