What is the best way to horizontally align a button with CSS?

I need help with positioning a button on my web page. The button looks great, but it's currently off to the left and I want it centered below the main text. Any suggestions on how to achieve this?

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>

<style>

    #logo {
        width: 100%;
        text-align: center;
        padding: 10em 0 0.2em 0;
        font-family: lato;
    }

    #sub {
        color: #fff;
        font-family: lato;
        text-align: center;
        word-spacing: 5em;
    }

    .button {
        background-color: #3b3d45;
        border: 6px solid #fff080;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: Arial;
        font-size: 12px;
        padding: 15px 20px;
        text-decoration: none;
        margin: auto;
        text-align: center;
    }

    .button:hover {
        background-color: #707488;
    }
</style>
</head>

<body>
<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>

<a href="#" class="button">Learn More</a>
</body>

</html>

I would really appreciate any guidance. Thank you!

htmlcssbutton

Answer №1

There is no absolute requirement for a container in this case. Here are some alternative options you can consider:

.button {
    background-color: #3b3d45;
    border: 6px solid #fff080;
    display: block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    padding: 15px 20px;
    text-decoration: none;
    margin: auto;
    text-align: center;
    width: 62px;
}

Remember, auto margins do not affect inline-block elements.

Answer №2

You can center align the buttons by placing them in a container. Check out the example below

When creating CSS styles, try to make them as reusable as possible. One benefit of this is that you end up writing less CSS code.

#logo {
  width: 100%;
  text-align: center;
  padding: 10em 0 0.2em 0;
  font-family: lato;
}

#sub {
  color: #fff;
  font-family: lato;
  text-align: center;
  word-spacing: 5em;
}

.button {
  background-color: #3b3d45;
  border: 6px solid #fff080;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  padding: 15px 20px;
  text-decoration: none;
  margin: auto;
  text-align: center;
}

.button:hover {
  background-color: #707488;
}
.text-center {
  text-align: center;
}
<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
  <a href="#" class="button">Learn More</a>
</div>

Answer №3

To center the Button, try placing it in a <div> element and applying the style rule text-align:center.

<div class="button-container">
    <a href="#" class="button">Click Here</a>
</div>

<style>
    .button-container {
        text-align: center;
    }
</style>

Answer №4

To achieve the desired outcome, simply include the below styles within the .button class

left: 50%;
position: absolute;
transform: translate(-50%, 0);

Answer №5

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>

<style>

    #logo {
        width: 100%;
        text-align: center;
        padding: 10em 0 0.2em 0;
        font-family: lato;
    }

    #sub {
        color: #fff;
        font-family: lato;
        text-align: center;
        word-spacing: 5em;
    }

    .button {
        background-color: #3b3d45;
        border: 6px solid #fff080;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-family: Arial;
        font-size: 12px;
        padding: 15px 20px;
        text-decoration: none;
        margin: auto;

    }

    .button:hover {
        background-color: #707488;
    }
    #button {
        text-align: center;
    }
</style>
</head>

<body>
<div class id="logo">
    <h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
    <p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
    <a href="#" class="button">Learn More</a>
</div>
</body>

</html>

What are your thoughts on this approach?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Showing content in a way that spaces out below the text

Could someone assist me with a CSS problem I'm having? I understand CSS, but debugging is not my strong suit. When I use display: inline-block for both my Academic Information and Personal Information, I'm getting extra white space below (above " ...

htmlcss

Personalizing bootstrap tabs

I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...

htmlcssbootstrap-5

Is there a way to ensure that the images in the slider all remain consistent in size?

I recently created a slider using bootstrap and encountered an issue with image display on mobile screens compared to laptop screens. On a Laptop screen: On a Mobile screen: The images on the mobile screen are not fitting properly within the slider, and ...

htmlcsstwitter-bootstrap

Manipulate DIVs by sliding them and resizing their contents with JQuery

Can someone help me with sliding the top div up and down, and the left div left and right? I wrote some code for this but seem to be facing some issues. When I slide the left div, the center content falls down momentarily. Additionally, the code doesn&apos ...

javascriptjqueryhtmlslider

How can you enhance the visibility of AngularJS Materials dropdown menus?

While experimenting with AngularJS Materials, I noticed that the text in some elements like <md-input-container> and <md-select> may be too light for some people to read easily. I wanted to find a way to make the text more visible without chang ...

javascripthtmlcssangularjs

Interested in mastering BootStrap for Angularjs?

As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...

cssangularjstwitter-bootstrap

Tips for increasing a variable by one with each button click?

I have a simple JavaScript function called plusOne() that is designed to increment a variable by 1 each time a button is clicked, and then display the updated value on a webpage. However, I'm encountering an issue where the addition only occurs once. ...

javascriptjqueryhtmlcss

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

cssjsxsettimeoutmap-function

Nested tables in CSS

Creating a Gridview with two nested Gridviews in separate cells may result in some CSS inheritance issues. Each row of the table contains these nested Gridviews, but trying to isolate their style using CssClass doesn't always work effectively. Is the ...

c#.netcss

Is it possible to retrieve a background-size value of 'auto' using jQuery, JavaScript, or CSS methods?

Just imagine background-size: 50% auto; If I desire to capture the "auto" value, is there a way for me to determine the new height or width? ...

jquerycssjquery-ui

How can jQuery be used to adjust the width and height of an iframe?

After researching a solution on a website, I attempted to implement it but encountered issues. It seems like there may be another script dictating the styling, so I need to add some code directly to the page to override it. This is what I tried: <scri ...

jquerycssiframe

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

javascriptangularjshtmlcsscanvas

Utilizing the dynamic pairing of Three.js and CSS3 to bring life to animated 3D objects

I am currently working on a project that involves creating 3D Lego elements and assembling them into a figure using animation. I have successfully modeled the elements in Blender and exported them as .obj/mlt files without any issues. However, when it come ...

javascripthtmlthree.js3dcss-animations

Designing a charcoal square div featuring a see-through circular element at its center

I'm working on a design concept that involves creating a square div with a transparent circle in the center. The idea is to have an image as the background, with the transparent circle acting like a window through which the background image can be see ...

jqueryhtmlcss

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss

Unable to retrieve the parent element using jQuery

I am facing an issue with my html structure that is generated dynamically through a foreach loop. I have attempted to remove the entire <a> element by accessing it from its ACTIVE HYPERLINK. However, all my efforts seem to be in vain as I am unable t ...

javascriptjqueryhtmlcss

Implementing a function as the `data-*` attribute for an element in Angular 6

I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...

javascriptangularhtmlangular6

Resetting jQuery after a click event is a useful technique that can help ensure

I am working on a survey using jQuery where based on user ratings, different div elements open up. If the user rates 3 stars or below, one div is displayed. However, if the user rates 4 or 5 stars, another div is shown. Everything functions as expected wh ...

htmljquery