Is it possible to center the buttons on the page by using position:absolute;?

this is my simple html

a { text-decoration: none; }
.button-one {
    background: #edf000; /* background color */
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
    background: #fff;
}
<a class="button-one" title="Relevant Title" href="#">Click Me</a>

<a class="button-two" title="Relevant Title" href="#">No Click Me</a>

<a class="button-three" title="Relevant Title" href="#">No Me LOL</a>

but when i try to add the position:absolute; The buttons become very bad

position:absolute;
top:50%;
-ms-transform:translateY(-50%);
transform:translateY(-50%);

I want the same result as the first but in the middle of the page where is the problem?

htmlcss

Answer №1

If you want to easily center some elements, you can achieve that by enclosing them in a div and using flexbox for alignment. Here's a simple way to do it:

.items{
  display:flex;
  justify-content:center;
  gap:10px;
  /* to center vertically */
  height:100vh;
  align-items:center;
}
a { text-decoration: none; }
.item-one {
    background: #edf000; /* background color */
}
.item-two {
    background: #f15640;
}
.item-three {
    background: #27c9b8;
}
.item-one,
.item-two,
.item-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.item-one:hover,
.item-two:hover,
.item-three:hover {
    background: #fff;
}
<div class="items">
  <a class="item-one" title="Some Title" href="#">Click Me</a>
  <a class="item-two" title="Another Title" href="#">No Click Me</a>
  <a class="item-three" title="One More Title" href="#">Don't Click Me LOL</a>
</div>

Answer №2

To ensure they are positioned at the center of the page, resembling the middle of the screen (if this is what you intended), you may utilize flex and vh for specifying element height. See the code snippet below:

.links {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
a { text-decoration: none; }
.button-one {
    background: #edf000; /* background color */
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
    background: #fff;
}
  <div class="links">
<a class="button-one" title="Relevant Title" href="#">Click Me</a>

<a class="button-two" title="Relevant Title" href="#">No Click Me</a>

<a class="button-three" title="Relevant Title" href="#">No Me LOL</a>
  </div>

Answer №3

This method is also effective.

a { text-decoration: none; }
.button-one {
    background: #edf000; /* background color */
}
.button-two {
    background: #f15640;
}
.button-three {
    background: #27c9b8;
}
.button-one,
.button-two,
.button-three {
    color: #000;
    display: inline-block;
    border-radius: 10px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button-one:hover,
.button-two:hover,
.button-three:hover {
    background: #fff;
}

.center-buttons {
    display:flex;
    justify-content:center;
    }
<div class="center-buttons">
<a class="button-one" title="Relevant Title" href="#">Click Me</a>

<a class="button-two" title="Relevant Title" href="#">No Click Me</a>

<a class="button-three" title="Relevant Title" href="#">No Me LOL</a>
</div>

Answer №4

Enclose anchor tags within a .container div and apply position: absolute along with width: max-content:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

a {
  text-decoration: none;
}

.button-one {
  background: #edf000;
  /* background color */
}

.button-two {
  background: #f15640;
}

.button-three {
  background: #27c9b8;
}

.button-one,
.button-two,
.button-three {
  color: #000;
  display: inline-block;
  border-radius: 10px;
  padding: 10px 18px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.button-one:hover,
.button-two:hover,
.button-three:hover {
  background: #fff;
}
<div class="container">
  <a class="button-one" title="Relevant Title" href="#">Click Me</a>

  <a class="button-two" title="Relevant Title" href="#">No Click Me</a>

  <a class="button-three" title="Relevant Title" href="#">No Me LOL</a>
</div>

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

Effortlessly adjusting the height of a hidden background image

At this website, I'm utilizing the CSS3 Cover property within the Background rule to extend an image behind the header. Presently, I've had to assign a min-height of 500px to the header element for it to display properly. However, this is not th ...

javascriptjqueryhtmlcss

unable to retrieve the latest scope value following the completion of the ajax request

I attempted to use the code below, but despite searching for answers and solutions involving $apply and $timeout, nothing seemed to work in my case. I encountered several errors along the way. JS: var app = angular.module("test",[]) app.config(function($ ...

jqueryhtmlangularjsajax

Curious about the distinction between express-ejs-layouts and DHTML?

According to Google search results, DHTML involves generating HTML content dynamically using Javascript. Meanwhile, EJS also claims to do the same thing with its abbreviation of Embedded JavaScript. It seems like both DHTML and EJS have similar functional ...

htmlexpressejsdhtml

What is the best way to use a jQuery variable within a .css() function

I'm working on a typewriter effect with some advanced CSS code. I need the program to calculate the length of a PHP variable and adjust the cursor animation steps accordingly. Basically, I want the cursor movement in the animation to be determined by ...

phpjqueryhtmlcss

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

javascripthtmlcss

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

htmlcssfontsfont-awesome

Elements that allow for asynchronous data submission without requiring a traditional submit button

Hey there, I could really use some help with this puzzle I'm trying to solve. Here's the situation: <ul> <li>Number: <span id="Number">123</span></li> </ul> I want to set up a connection between t ...

javascripthtmlangulartypescriptasynchronous

Obtain the WordPress footer while applying a specific CSS rule

I need to customize my Wordpress template so that a specific css class is applied to a certain element. Currently, I am loading the footer in my templates using the <?php get_footer(); ?> function. However, I would like to load the footer with the . ...

phphtmlcsswordpress

What is the best way to align my Dropdown text to the left?

Is there a way to align my Dropdown and parent submenu text to the left, while keeping my tab text always justified to the right? Below is the code snippet: <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ ...

htmlcss

Preventing CSS shapes from overlapping with the next DIV

I'm currently working on creating a V-shape using CSS. While I have successfully created the shape, I am facing an issue where I cannot get the shape to appear "above" another div with a background image when it is placed before it and made negative. ...

csstwitter-bootstraptwitter-bootstrap-3shapes

The Angular integration with Semantic UI dropdown does not display the selected value clearly

I have put together a small example to demonstrate the issue. http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF Essentially, the HTML structure is as follows: <div data-ng-app="app" data-ng-controller="main"> <select class="ui dropdown" id="ddlStat ...

javascripthtmlangularjssemantic-uidropdown

Tips for dynamically loading a modal

Hello, I am curious about dynamically loading modals on different images within my current webpage. https://i.sstatic.net/yhTgs.png For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. https://i.sstatic.net ...

javascriptjquerycsshtml

Guide on transferring an HTML template to a React component using props

I've created a React popup window component that accepts templates via props. Check out this example of how the popup is used: popup = ( <div> <Popup text='This is a popup' popupEl={ popupEl } /> < ...

htmlreactjs

How do I adjust the Bootstrap 4 column width to match the size of its content?

I am facing the following situation: [![enter image description here][1]][1] What I want is: Number 1: Adjust the column width to fit the content, in this case the image. Number 2: Resize the column width to accommodate the text "Title of Content" ...

htmlcssbootstrap-4

"Creating an HTML table from a Postgres table in Node.js: Step-by-step guide

Currently, I am attempting to learn how to dynamically display a database table from Postgres in an HTML table on a web page. I have experimented with EJS and pug templates but encountered the error of function or parameter not being defined in both cases. ...

htmlnode.jspostgresql

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

htmlcsswordpressfontsicons

What is the process for saving the selected value from a radio button into the database?

Below is an example of code I am working with: <label style="cursor:pointer;"><input type="radio" name="rads" value="'.$correct.'" id = "radio">'.$answer.'</label> <button onclick="myFunction()">Value</butto ...

javascriptphpjqueryhtmlmysql

What is the method for ensuring a p element is only as wide as necessary when it wraps within a parent div with a specified hardcoded width?

Is there a way to adjust the width of the p-element in my example below based on the text inside without affecting the normal line break behavior, using only CSS if possible? It appears to be ignoring wrapping and is too wide: https://i.stack.imgur.com ...

htmlcss

CSS - Choosing between Background Size Contain or Default Size

Is there a solution to my dilemma regarding background images in a div? I need the image to be contained within the div if it's larger (background-size:contain;), but if the image is smaller, I want to keep it as is without stretching or blurring (bac ...

cssbackground-imagebackground-size