Home » CSS » HTML/CSS: Align Buttons Horizontally Example

HTML/CSS: Align Buttons Horizontally Example

By

Learn how to code HTML and CSS to align the buttons horizontally for a page.

CSS Code

The following CSS code will set the properties for the class relative assigned to the div element. The main part of the below code is the CSS for class navitem. The class navitem will be assigned to the button element in the HTML code.

<style>
.relative {
 padding: 10px;
 position: relative;
 background-color: #fff;
 margin: 10px;
} 
.navitem {
  display: inline-block;
  width: 70px; 
  height: 30px; 
  text-align: center;
  border: gray;
  background-color: #E8562A;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
</style>

HTML Code

<body>
    <div class="relative">
        <h1>Align Buttons Horizontally Example</h1>
        <p>Here’s some content in the paragraph and the buttons
            <button class="navitem">Item 1</button>
            <button class="navitem">Item 2</button>
            <button class="navitem">Item 3</button>
        </p>
    </div>
</body>

Output

Align Buttons Horizontally Example

Here’s some content in the paragraph and the buttons

Complete HTML Example

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .relative {
            padding: 10px;
            position: relative;
            background-color: #fff;
            margin: 10px;
        }
        
        .navitem {
            display: inline-block;
            width: 70px;
            height: 30px;
            text-align: center;
            border: gray;
            background-color: #E8562A;
            color: #fff;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="relative">
        <h1>Align Buttons Horizontally Example</h1>
        <p>Here’s some content in the paragraph and the buttons
            <button class="navitem">Item 1</button>
            <button class="navitem">Item 2</button>
            <button class="navitem">Item 3</button>
        </p>
    </div>
</body>

</html>

See also: