I'm diving into the world of HTML/CSS for the first time and encountering some issues along the way.
In my setup.html, I created a "Continue" button and applied a class to style it in styles.css. However, I'm facing an issue where text-align center doesn't seem to work on the button. Interestingly, I also have a "Start" button in index.html where text-align center does work properly. I've tried assigning both buttons the same class as well as different classes, but I'm unsure of what step to take next.
Here's the HTML code for my button:
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
And here is my CSS:
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
max-width: 280px;
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
Although the styling for the "#contine" part in my styles.css file is identical to that of the "start" button, it seems to only apply correctly to the start button.