Reputation: 21

Can't Get my Buttons to Center

I've been having trouble getting my buttons to center in CSS. I know the correct code to do so but all I have tried so far hasn't worked. I think that something is interfering with the code to center it but after an hour of looking I haven't been able to figure out the issue.

Here's my HTML:

@font-face {
  font-family: BebasNeue;
  src: url('BebasNeue Regular.otf');
}

body {
  font-family: helvetica;
  background-color: #F6F6F6;
  margin: 0 auto;
  width: 1400px;
}

.button {
  background-color: #DE1B1B;
  /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

ul {
  margin: 0 auto;
  list-style-type: none;
  background-color: #2B2B2B;
  font-size: 25px;
  font-family: BebasNeue, sans-serif;
}

h1 {
  float: left;
  margin: 0px 0 20px 0;
  padding: 5px 0 0 0;
  width: 100%;
  font-size: 50px;
  font-family: BebasNeue, sans-serif;
  color: #E9E581;
  background-image: url('classroomb.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#heading {
  margin-top:
}

li {
  display: inline;
}

a {
  padding: 6px;
  text-decoration: none;
  color: #DE1B1B;
  position: center;
}

p {
  font-size: 22px;
  padding: 40px;
  margin: 0 auto;
  width: 1000px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Ms. Houck's Math Class</title>
  <link rel="stylesheet" href="HouckStyle1.css">
</head>

<body>
  <header>
    <div>
      <ul>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> Homework </a></li>
        <li><a href="#"> HW Solutions </a></li>
        <li><a href="#"> Documents </a></li>
        <li><a href="#"> Calendar </a></li>
      </ul>
    </div>
  </header>
  <center>
    <h1>
      <div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
    </div>
  </center>
  <p>
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
    <br><a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a>
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a>
  </p>
</body>

</html>

Upvotes: 1

Answers (4)

Twinkle Jha

Reputation: 29

The best and the easiest way is to use flexbox and use justify-content:center which aligns the items in the center of the main axis. You can learn more about flexbox here.

Upvotes: 2

jrn

Reputation: 2800

You could just wrap the two buttons in a new <div> which you then tell to have its content centered:

Add to css:

.center {
    text-align: center;
}

HTML:

<div class="center">
    <a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a>
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a>
</div>

JSFiddle

Please consider using <div class="center"> instead of deprecated <center> tag.

Upvotes: 1

xAqweRx

Reputation: 1236

@font-face {
  font-family: BebasNeue;
  src: url('BebasNeue Regular.otf');
}

body {
  font-family: helvetica;
  background-color: #F6F6F6;
  margin: 0 auto;
  width: 1400px;
}

.button {
  background-color: #DE1B1B;
  /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

ul {
  margin: 0 auto;
  list-style-type: none;
  background-color: #2B2B2B;
  font-size: 25px;
  font-family: BebasNeue, sans-serif;
}

h1 {
  float: left;
  margin: 0px 0 20px 0;
  padding: 5px 0 0 0;
  width: 100%;
  font-size: 50px;
  font-family: BebasNeue, sans-serif;
  color: #E9E581;
  background-image: url('classroomb.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


li {
  display: inline;
}

a {
  padding: 6px;
  text-decoration: none;
  color: #DE1B1B;
  position: center;
}

p {
  font-size: 22px;
  padding: 40px;
  margin: 0 auto;
  width: 1000px;
}
.center{
text-align:center;
}

<header>
    <div>
        <ul>
            <li><a href="#"> Home </a></li>
            <li><a href="#"> Homework </a></li>
            <li><a href="#"> HW Solutions </a></li>
            <li><a href="#"> Documents </a></li>
            <li><a href="#"> Calendar </a></li>
        </ul>
    </div>
</header>
<br/>

<div class="center"><h1>Ms. Houck's Math Classes</h1></div><br/><br/><br/><br/><br/>
<p>
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and
    schedule by clicking the links below. 
</p>
<br><br>
<div class="center">
<a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a>
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a></div>

Your buttons are not centered. They are in <p> code.
If you want to center them - make other block with align tag
<center> tag is deprecated, should not use this

Upvotes: -2

StefanBob

Reputation: 5128

You can just use flexbox and justify-content: center; on the navigation ul (took out div) Use margin on the li a to modify spacing.

@font-face {
  font-family: BebasNeue;
  src: url('BebasNeue Regular.otf');
}

body {
  font-family: helvetica;
  background-color: #F6F6F6;
  margin: 0 auto;
  width: 1400px;
}

.button {
  background-color: #DE1B1B;
  /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

ul {
  margin: 0 auto;
  list-style-type: none;
  background-color: #2B2B2B;
  font-size: 25px;
  font-family: BebasNeue, sans-serif;
}

h1 {
  float: left;
  margin: 0px 0 20px 0;
  padding: 5px 0 0 0;
  width: 100%;
  font-size: 50px;
  font-family: BebasNeue, sans-serif;
  color: #E9E581;
  background-image: url('classroomb.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#heading {
  margin-top:
}

header ul {
display: flex;
justify-content: center;
}

li {
  display: inline;
}

a {
  padding: 6px;
  text-decoration: none;
  color: #DE1B1B;
  position: center;
}

p {
  font-size: 22px;
  padding: 40px;
  margin: 0 auto;
  width: 1000px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Ms. Houck's Math Class</title>
  <link rel="stylesheet" href="HouckStyle1.css">
</head>

<body>
  <header>

      <ul>
        <li><a href="#"> Home </a></li>
        <li><a href="#"> Homework </a></li>
        <li><a href="#"> HW Solutions </a></li>
        <li><a href="#"> Documents </a></li>
        <li><a href="#"> Calendar </a></li>
      </ul>
  
  </header>
  <center>
    <h1>
      <div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1>
    </div>
  </center>
  <p>
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br>
    <br><a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a>
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a>
  </p>
</body>

</html>

Upvotes: 0

Can&#39;t Get my Buttons to Center

Answers (4)

Related Questions

Can't Get my Buttons to Center