0

Update: Thank you for the answers and comments! I got it now! I basically just copied and pasted it in there, but I probably have a little bit more understanding now. Thank you!

I'm trying to place a custom button on a Squarespace site. I don't know html or css. I have the button, but can't seem to center it properly on the page, despite looking up a bunch of answers about centering buttons here.

How can I center this button?

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #3B96F7; /* blue */
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #3DB8FE;
    color: white;
}


.button {border-radius: 60px;}


</style>
</head>
<body>


<a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button> </a>


</body>
</html>
Noah D
  • 23
  • 3
  • First of all your `a` element is semantically wrong, you cannot put a `button` inside a `a` element, see: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5. Also I would recommend you to read this https://www.w3schools.com/html/html_intro.asp and this https://www.w3schools.com/css/css_intro.asp – caiovisk Jul 18 '18 at 01:16
  • you could add a "text-align: center;" to the container for your a(anchor) tag. – fja3omega Jul 18 '18 at 01:17
  • you can, however, give `button` like classes to `a` elements. – Joshua Jul 18 '18 at 01:18

3 Answers3

2

The easiest way to do this is with flexbox.

Simply wrap the button in a container (such as <div class="button-container"> and then give the container the following rules:

.button-container {
  isplay: flex;
  align-items: center;
  justify-content: center;
}

From here it's just a matter of giving it a height.
If you want it to occupy the full page, you can use height: 100vh.

Note that you'll also want to accommodate for the default margin on body, which can be overridden with the following:

body {
  margin: 0;
}

This can be seen in the following:

body {
  margin: 0;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh);
}

.button {
  background-color: #3B96F7;
  /* blue */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button {
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #3DB8FE;
  color: white;
}

.button {
  border-radius: 60px;
}
<div class="button-container">
  <a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button></a>
</div>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
1

You can accomplish horizontal centering of elements by applying the css

text-align:center

on the parent html element. In the example below, I added a parent div and gave it a class. Using that class, I applied the center.

.parentContainer {
  text-align: center;
}

.button {
  background-color: #3B96F7;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #3DB8FE;
  color: white;
}

.button {
  border-radius: 60px;
}
<div class="parentContainer">
  <a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button> </a>
</div>
CodeCheshire
  • 710
  • 1
  • 8
  • 27
  • @Obsidian Age's solution is better if you are looking for a horizontal and vertical center. Flexbox is the new cool for centering. – CodeCheshire Jul 18 '18 at 01:27
0

Firstly there is some error in you code. We cannot use button tag inside anchor tag. If you want anchor to look like button you can add desired class to anchor tag. Now for centering the button, you need to wrap it around by some block level tag and use text align center.

<!DOCTYPE html>
<html> 
<head>
<style> 
.button-wrap { text-align: center; } 
.button { background-color: #3B96F7; /* blue */ 
border: none; 
color: white; 
padding: 20px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px; 
margin: 4px 2px; 
cursor: pointer; 
}
.button { -webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s; 
}
.button:hover { background-color: #3DB8FE;
color: white; 
} 
.button { border-radius: 60px;} 
</style> 
</head> 
<body> 
<div class="button-wrap">
<a href="https://www.childrenschoir.com/about-the-rvcc/" class="button">About The Choir</a>
</div>
</body>
</html>
dinesh thapa
  • 31
  • 3