What is the best way to center align the button on my card?

I am having trouble aligning the "Check Github" button in the center of the card. I have tried using item-align: center;, justify-content:center;, and margin-right: 50px; but none of them seem to work on this particular element. Can you please provide guidance on how to solve this issue? Thank you.

Below is my HTML code along with the CSS section for the button:

.btn {
  border-radius: 1rem;
  transition: all 0.5s;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  opacity: 85%;
  background-color: #ffc229;
  padding: 1rem 0.3rem;
  margin-bottom: 10px;
  margin-top: 10px;
 } 
<section>
     <div class="flex">
        <div class="col">

          <a href="#">
            <img src="pac_man.jpg" width="" height="" alt="Pac-Men">
          </a>

          <h3>Pac-Men</h3>
          <p>Create as many or as little Pac-Men as you like and see them bouncing
            around!</p>
          <p> Try it with the <a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
              target="_blank">live demo.</p>

          <a class="btn" href="https://github.com/mayazhl/PacMen_Factory">Check Github</a>
    </div> 
</section>

htmlcss

Answer №1

Your HTML Code

<section>
     <div class="flex">
        <div class="col">
          <a href="#">
            <img src="pac_man.jpg" width="" height="" alt="Pac-Men">
          </a>
          <h3>Pac-Men</h3>
          <p>Create as many or as little Pac-Men as you like and see them bouncing
            around!</p>
          <p> Try it with the <a href="https://raw.githack.com/mayazhl/PacMen_Factory/main/index.html"
              target="_blank">live demo.</p>
          <div class="btn">
            <a class="" href="https://github.com/mayazhl/PacMen_Factory">Check Github</a>
          </div>
    </div> 
</section>

Your CSS Styles

.flex {
        display: flex;
        width: 100vw;
    }
    .col{
        width:100%;
    }
    .btn{
        text-align: center;
    }

Answer №2

Make sure to include the following code snippet in your ".btn" class to resolve the issue:

.btn {
  display: flex;
  justify-content: center;
}

If the initial suggestion does not work, you can also try this alternative approach:

.btn {
  text-align: center;
}

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

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...

cssangularjs

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

htmlcssreactjs

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

cssreactjsnext.jsclassname

Is there a Facebook application embedded in the user's wall?

Is it feasible to create a website similar to YouTube, where users can share it on Facebook and run the app (in this case, the video player) directly on their wall without having to visit the YouTube page? If it is possible, is this functionality limited ...

javascriptfacebookflashhtml

PHP is experiencing issues when trying to insert data into the database

When I run a query in phpMyAdmin such as INSERT INTO table('نچجاعجان'); it appears correctly, but when I try to insert data through my PHP page, it displays in the field like this: ÙاننناÙنعن The col ...

phphtmlmysqlutf-8

Typescript includes empty spaces in its duplicate-checking process

I have been working on removing duplicate values from an array using the following code: for (var i = 0; i < a.length; i++) obj[a[i]] = a[i] a = new Array(); // Checking each object with keys to remove duplicates. for (var key ...

htmlangulartypescript

Ways to display or conceal information depending on the dropdown choice

In my Angular project, I am dealing with a dropdown menu that is followed by some data displayed in a div element. component.html <select class="form-control" id="power" required> <option value="" disabled selected ...

javascripthtmlangulartypescriptangular-ng-if

Refusing to cease downloading music on the local server through the embedded audio element

I was trying to setup background music on my website, but when I test it localhost, the music download instead of playing. However, when I tested with the full path, it played as expected. How can I prevent the download from happening in localhost? Here i ...

javascripthtml

How can JavaScript be utilized for connecting to CSS files?

I'm unsure if this is feasible and after a brief search, I couldn't find any information. I am curious to know if it's possible to connect a CSS file using JavaScript? In essence, I would like to invoke a style sheet when I execute a specif ...

javascriptcss

Is Bootstrap causing columns to not change colors as expected?

I've been attempting to alter the colors of the column names, but they remain white. Here's an example: <div class="table-responsive"> <button id="exportButton" class="btn btn-primary">Button</butt ...

htmlcssbootstrap-4bootstrap-5

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

How to vertically center a div using CSS

I need assistance center aligning #container with the following code: <div id="container"> <p>new</p> </div> The CSS provided is as follows- #container { position:relative; width:100%; background:red; padding:10px; ...

css

When using HTML select tags, make sure to submit the actual text of the selected option instead of just the value attribute

There seems to be an issue with a form that I am submitting via POST where the option text is being sent instead of the option value. Here is my select declaration: <select name = "newfreq"> <option val='1'>every week</option ...

phpjqueryhtmlforms

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

Bootstrap arranges checkboxes into three evenly spaced columns and centers them within a form

Having trouble organizing my checkboxes into 3 columns and centering them within the form perfectly. Current layout: Click here for image Desired look: Click here for image HTML: ` <form action="/signup" method="POST" ...

htmlcsscheckboxbootstrap-4

Modifying an element's value according to user input: Step-by-step guide

Within my dropdown menu, there is a single option labeled "Others". Upon selecting this option, a textbox appears allowing me to input custom text. Is it possible to dynamically update the value of the <option value="Others">Others</option>, ...

javascripthtmltypescript

Is there a way to populate two mysql tables using just one textarea input?

Hello, I'm currently working on my "Add Blog Post" page where I would like to make a change. Specifically, I want to eliminate one textarea (the post description area) and have the content entered in the Post Content textarea populate both the post de ...

phphtmlmysql

When the form is submitted, I am unable to record the checkbox value

Hi, I have a question regarding submitting a form to the "/delete" route when a checkbox is checked. Although I am able to submit the form successfully, I am facing an issue retrieving the checkbox value that I assigned using ejs. Below are the relevant co ...

javascripthtmlnode.jsexpressejs

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

phphtml