HTML/CSS: Align Buttons Horizontally Example

HTML/CSS: Align Buttons Horizontally Example

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 2 mins read

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: