I'm having a problem centering a button on my website


#1

Basically, I want to center the “Generate” button on the page, but I can’t figure out how.

Here’s the code:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: block;
  text-align: center;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  
.h2 {
  color:#0099ff;
  text-align: center;
}

.center {
  position: absolute;
  top: 50%;
  margin: auto;
  width: 200px;
  padding: 50%;
  bottom: 50%;
}

</style>

</head>

<body>

<h2 style="color:#0099ff; text-align:center; font-family:"Georgia";">Spanish Word Generator</h2>

<div class="center">
<button class="button">Generate</button>
</div>

</body>

</html>


#2

Your button should have a width property. text-align applies to contents of an object, not the object itself. For that you can use, margin: 0 auto;, or alternately, give the parent container a text-align property to apply to its children.


#3

Thank you @mtf but I tried that and it still hasn’t solved my problem. Maybe there’s another way?


#4

Let’s see your code again to we can catch up on changes made so far.


#5
<!DOCTYPE html>
<html>
<head>
<style>
.button {
  position: absolute;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  
.h2 {
  color:#0099ff;
  text-align: center;
}

</style>

</head>

<body>

<h2 style="color:#0099ff; text-align:center; font-family:"Georgia;">Spanish Word Generator</h2>

<div>
<button class="button">Generate</button>
</div>

</body>

</html>


#6

Absolute positioning is out of normal flow so margins and centering are not on the table.

Let your width on the div span the page, then give your button a width (say 100px) and margin: 0 auto. If you want some whitespace above and below the button, then change the 0 to 1em. If you give the button a height: 2em, and a line-height: 2em, the text will center vertically. To center the text horizontally, give the button a text-align: center property.

Since you have a style sheet, move the style rules for the H2 there. The sty attribute in your code is broken, for one, and inline styles as so not the way to write HTML.

h2 {
  color: #0099ff; /* shorthand... #09f */
  text-align: center;
  font-family: Georgia, serif;
}

#7

Ok thank you very much for helping but one more question: how do you center the button horizontally?
Here’s my code so far:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  position: absolute;
  width: 150px;
  margin: 10em auto;
  display: in-line block;
  height: 2em;
  line-height: 2em;
  text-align: center;
  font-size: 24px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

</style>

</head>

<body>

<h2 style = "color: #0099ff; text-align: center; font-family: Georgia, serif;">Spanish Word Generator</h2>

<div>
<button class="button">Generate</button>
</div>

</body>

</html>

#8

By not positioning absolutely.


#9

Ok, thank you. Got it.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.