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

Changing the background color using jQuery switch case statement

I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...

javascriptjqueryhtmlcss

Modifying JavaScript Code in Inspect Element Editor

When I modify the HTML content using Chrome's Inspect Element editor, any changes made are immediately visible. However, when I make changes to the JavaScript code, the modifications do not take effect. For example, if I have a button that triggers a ...

javascriptjqueryhtmldom

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor&apo ...

javascripthtmlcanvasimage-resizing

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Is it possible to utilize the AmMap API for developing an Android application?

I am currently in the process of creating a unique application with HTML, JS, and jQuery Mobile that will feature interactive maps. I have been searching the web for APIs to incorporate interactive maps into my project without using Google Maps APIs when I ...

javascriptandroidhtmlammap

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

cssreactjstwitter-bootstrapmaterial-ui

The script for tracking cursor coordinates is incompatible with other JavaScript code

<html> <script language="javascript"> document.onmousemove=function(evt) { evt = (evt || event); document.getElementById('x').value = evt.clientX; document.getElementById('y').value = evt.clientY; document.ge ...

javascripthtmlbrowser

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs

Having trouble rendering an HTML webpage using Flask's RESTful API? Your webpage might be displaying improperly

Trying to display an HTML page on local host using a restful flask API. The content of the HTML page appears as a string with "" instead of rendering the actual page. class data(Resource): def get(self): #return "Welcome!" return rende ...

pythonhtmlflask-restful

"Utilize CSS Flexbox to create a layout with set width and uniform

Within a container, I have organized three sections. As I adjust the size of my browser to a maximum width of 668px, I want section 1 and section 3 to be displayed in one row while section 2 is placed below them. The width of section 2 should be proportion ...

htmlcssflexbox

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

csswebpacknode-modulescss-loader

positioned absolutely with a margin of 0 auto

Struggling to find a way to center the text in the wrapper? I have a responsive slideshow that requires text to be on top of it and centered. ul.bjqs { position:relative; list-style:none; padding:0; margin:0; z-index: 1; overflow ...

csspositioningabsolute

Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br> <br> <strong>Who's this pretty girl ninja!?</strong> <br><img title="Cool dude bro!" src="/images/profile5.png"></br> & ...

htmlcss

Quiz results are incorrect

I've been working on creating a quiz application using JavaScript only, but I'm encountering an issue with the scoring. Initially, I set the correct variable to 0 and intended to increment it by 1 each time a correct answer is selected. However, ...

javascripthtml

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

javascriptjqueryhtmlcss

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

Tips for adding an animated box shadow in CSS without adjusting the shadow's direction

A unique box with a rotating animation was created, however, applying a box-shadow caused the shadow to also rotate along with the box. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ displa ...

csscss-animations

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

javascriptjqueryhtmlcssyoutube