Div with border and font awesome icon won't center

Question

I am trying to make a homepage of some sorts and I can't find a way to make a div center, I can't really explain it good so the picture might help The piece of code I'm trying to fix

I tried putting text-align: center; for the div but it only centered the text in the div, I wanted it to center the div just like the text above.

HTML: <script src="https://kit.fontawesome.com/0c86b13d40.js" crossorigin="anonymous"></script> <div> <p class="text title">My Info</p> </div> <div id="buttons"> <i class="fa-solid fa-house"> H o m e </i> </div>

CSS:

    .title {
      font-size: 350%;
      margin-top: 100px;
    }

    .text {
      text-align: center;
    }

    #buttons {
      text-align: center;
      width: 130px;
      border: 2px solid;
      padding: 10px;
      border-radius: 25px;
    }

score -1 · Answer 1 · answered Mar 12 '23 at 00:48

You can use the flex display property.
Wrap the buttons inside a div set to flex:

<div id='flex'>
  <div>Buttons div go in here</div>
</div>

Then use this CSS:

div#flex {
  display: flex;
  justify-content: center;
}

FYI text-align only works on content within the div itself.

score -1 · Accepted Answer · answered Mar 12 '23 at 00:49

CSS property margin: 0 auto; can be used to center a div horizontally. By setting the left and right margins to auto, the div will be centered horizontally within its parent container.

<div style="border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;">
   <i class="fas fa-home"></i>
   <p>Some text</p>
</div>

mmirbekian · Answer 3 · 2023-03-12T01:04:24.653

It might be because they are not inside the same div? It would be helpful if you could upload some code here but this code works too.

<!DOCTYPE html>
<html lang="en-us">
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<style>
  button {
    width: 200px;
    padding: 5px;
    background-color: lightcoral;
    border-radius: 5px;
    color: white;
    font-size: 20px;
  }
  button:hover {
    background-color: lightblue;
  }
  div {
    text-align: center;
  }
</style>

<body>
<div> 
  <p>hello world</p>
  <button> <i class="fa fa-car"></i></button>
  </div>
  
    </body>
</html>

Div with border and font awesome icon won't center

3 Answers3