Menu
I have HTML code for a website, but the <button> elements in the center are too far up. Here's my code:
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html"><button type="button">Home</button></a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<a href="help.html"><button type="button">Help</button></a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>As you can see, the buttons in the center are slightly higher. Why is this happening, and how can I align them correctly?
660
We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.
If you want to move the button to the right, you can also place the button within a <div> element and add the text-align property with its "right" value to the "align-right" class of the <div>.
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
The default vertical alignment of inline elements is "baseline," which means the baseline of the element will be the same as the baseline of its parent.
If you add text to the parent element (nav), you'll see that the first word of each button sits on the same line as it:
To overcome this, set vertical-align of the buttons to "top" or "bottom":
button {
vertical-align: top;
}
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
vertical-align: top;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html"><button type="button">Home</button></a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<a href="help.html"><button type="button">Help</button></a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>You have an extra space in your CSS -- the "comingsoon" class is not being applied to your span;
Changing that from
button span .comingsoon
to
button span.comingsoon
Will fix the button alignment and font size mistakes.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
