What is the best way to use CSS to align these buttons in a single row?

I've been working on developing this extension and I'm facing an issue with positioning these buttons. They appear misaligned.

.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: left;
  float: left;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  float: center;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: right;
  float: right;
}
<a href="2048/index.html" class="fversion-button">2048</a>
<a href="16384/index.html" class="sversion-button">16384</a>
<a href="65536/index.html" class="tversion-button">65536</a>

I'm relatively new to CSS and still learning.

htmlcssbutton

Answer №1

To improve the layout, I suggest switching from using float to making the elements inline-blocks. Additionally, consider removing the vertical alignment or setting it to middle (as left and right are not valid values for vertical align).

.fversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.sversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}

.tversion-button {
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}
<a href="2048/index.html" class="fversion-button">2048</a>
<a href="16384/index.html" class="sversion-button">16384</a>
<a href="65536/index.html" class="tversion-button">65536</a>

If you want to spread them out on the line, consider placing them in a flex container:

.container {                         
  display: flex;
  justify-content: space-between;
}

.container > a {  
  border: 2px solid #8f7a66;
  background: #8f7a66;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
  background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
  background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
  background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
  background: -o-linear-gradient(top, #8f7a66, #8f7a66);
  background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);  
  padding: 10px 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0, inset rgba(255, 255, 255, 0.4) 0 0px 0;
  color: #ffffff;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;                 
<div class="container">
  <a href="2048/index.html" class="fversion-button">2048</a>
  <a href="16384/index.html" class="sversion-button">16384</a>
  <a href="65536/index.html" class="tversion-button">65536</a>
</div>

Answer №2

There isn't any CSS quite like

float: center

  • This code is found in the .sversion-button class. It's recommended to change it to

float: left.

By making this adjustment, the button should align correctly as desired.

Answer №3

To achieve the desired layout, you must eliminate the float center and make adjustments to both the html and css elements. By following these changes, you will attain the desired outcome.

.fl1{
  float:left;
  width:33.33%;
  margin:5px auto;
}
.fl2{
  float:left;
  width:33.33%;
  text-align:center;
  margin:5px auto;
}
.fl3{
  float:left;
  width:33.33%;
  text-align:right;
  margin:5px auto;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   }


.sversion-button {
    ... (Continued with additional styling)

<div class="fl1">
<a href="2048/index.html" class="fversion-button">2048</a>
</div>
... (Following the pattern for other links)

Answer №4

apply the CSS rule display:inline-block; to the a tag and set all buttons to float:left

a{
  display:inline-block;
}
.fversion-button {
     border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;


color: #ffffff;
   text-decoration: none;
   vertical-align: left;
   float: left;
   }


.sversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: middle;
   float: left;
   }  


.tversion-button {
    border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;


   text-decoration: none;
   vertical-align: right;
   float: left;
}
<a href="2048/index.html" class="fversion-button">2048</a>
       <a href="16384/index.html" class="sversion-button">16384</a>
   <a href="65536/index.html" class="tversion-button">65536</a>

Answer №5

/* Update CSS for buttons with a common class */

.demo_btn {
   border: 2px solid #8f7a66;
   background: #8f7a66;
   background: -webkit-gradient(linear, left top, left bottom, from(#8f7a66), to(#8f7a66));
   background: -webkit-linear-gradient(top, #8f7a66, #8f7a66);
   background: -moz-linear-gradient(top, #8f7a66, #8f7a66);
   background: -ms-linear-gradient(top, #8f7a66, #8f7a66);
   background: -o-linear-gradient(top, #8f7a66, #8f7a66);
   background-image: -ms-linear-gradient(top, #8f7a66 0%, #8f7a66 100%);
   padding: 10px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
   color: #ffffff;
   text-decoration: none;
   vertical-align: middle;
   display: inline-block;
}
<!-- Assign the same class to all buttons -->

<a href="2048/index.html" class="fversion-button demo_btn">2048</a>
<a href="16384/index.html" class="sversion-button demo_btn">16384</a>
<a href="65536/index.html" class="tversion-button demo_btn">65536</a>

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

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

`<a> The value does not appear upon page load`

As a newcomer to development, I am currently experimenting and creating a sample dashboard. However, I am facing an issue where the sidebar value does not display upon loading the page. I have to manually click on a list in my sidebar for it to appear. Th ...

htmlcssbootstrap-4

Unexpected behavior: Bootstrap 4 tooltip fails to appear on dynamically-generated elements

The tooltips appearing are not the expected Bootstrap 4 style tooltips. The tooltips currently displayed: https://i.sstatic.net/60Ubm.png compared to the tooltips that should be shown: https://i.sstatic.net/koayu.png I have enabled the tooltips in the ...

javascripthtmljquerycssbootstrap-4

Is the first part of the URL in Express susceptible to injections when using two-level URLs?

I am currently utilizing Node.js and Express for my project. When dealing with a single-level URL like: /estonia All scripts and styles are loading correctly. However, when it comes to a two-level URL such as: /estonia/tallinn The scripts and styles i ...

javascripthtmlnode.jsexpress

Display the value of a shortened string

My Goal I aim to develop a method for determining the amount of a string visible before it gets cut off. Motivation In my project, there is a collection of items that can be chosen. A panel presents a concatenated string of the selected item names separa ...

javascripthtmlcssangular

Automatically adjust column sizes using Bootstrap's responsive width feature

While I have a feeling this question might have been asked before, my search has turned up no similar issues. I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by Wor ...

htmlcssbootstrap-4flexboxflexboxgrid

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

submitting image data from HTML5 canvas using an HTML post request

I am having issues sending canvas data to the server side as an image. Despite making an HTTP post request, I am unable to retrieve the data on the server side. $_POST remains empty, even though I can see the image data when console logging the object on t ...

phpjavascripthtmlhtml5-canvas

Issue with AJAX causing form data not to be passed to controller

Recently, I encountered an issue with a form in my view: <form id="MyForm"> <input type="text" name="myinput" /> <button type="submit" /> </form> In my view's JavaScript code, which is executed upon page load, I have the foll ...

javascriptjqueryhtmlajaxasp.net-mvc-4

Enhance placeholder opacity during transition on Firefox

Trying to create a smooth transition effect for input placeholders on focus, but encountering issues with Firefox. <input type="text" placeholder="some cool text"/> input:focus::-moz-placeholder { opacity: 0.1; } input::-moz- ...

htmlcsscss-transitions

The location of the new HTML window page is not functioning properly when trying to redirect to "mypage.html". Can you help troub

I am looking to open a new HTML page within the same page when a button is clicked. I have attempted to implement this code, however, it does not seem to be working. Can anyone help identify the error here? Thank you in advance. Button: <input type="s ...

javascripthtml

Execute jQuery toggle animation a single time for each function call

In my complex system, I have implemented several AJAX calls to render different templates in PHP. One of these templates is an edit form for my entity which is initially hidden on the website and displayed only when a button is clicked triggering a jQuery ...

javascriptjqueryhtmlajax

Handling overflow and z-index of tabs in Vuetify Drawer

Struggling to create an expandable sidebar menu using Vuetify2, following the documentation, but unable to prevent the expanded menu from overlapping other elements on the page. The current behavior causes items to be pushed away and wrap onto the next ro ...

cssvue.jsvuejs2vuetify.jsnavbar

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

Ensure that the user-entered text input is validated within a table using Angular 5

HTML file <mat-table #table [dataSource]="CMDataSource"> <ng-container matColumnDef="mQues"> <mat-header-cell *matHeaderCellDef> Ticket Volume </mat-header-cell> <mat-cel ...

javascripthtmlangulartypescriptangular-material

Converting Unicode symbols in Perl to ensure their safe storage in a database and proper rendering in HTML

In a nutshell, my input data appears as follows: इस परीक्षण के लिए है Something Zürich This information goes through several programs before being inserted into a mongodb database. However, when I retrieve it and attempt ...

htmlperlunicodecharacter-encoding

Troubleshooting issue with CSS `gap` property malfunctioning in conjunction with `display: block;` setting

I've run into an issue with the gap property in CSS not working as expected in my layout. After investigating, I found that some of my containers have display: block; set, which seems to be causing the gap property to be ineffective. My goal is to cre ...

htmlcssreactjs

Reflection mask feature in Chrome for Android that uses Webkit technology

Chrome Reflection on Desktop Computers By using Chrome on a desktop computer, I am able to create an image reflection with the following CSS code: img { -webkit-box-reflect: below 0 -webkit-gradient( linear, left top, left bottom, from(tran ...

androidcssgoogle-chrome

Customizing CSS for AGM Info Windows

After creating an agm-info-window with an image and a small text (tittle), here is the code: <agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon"> <agm-info-window [disableAutoPan]="true" [isOpen]="true"> <div route ...

cssangulargoogle-mapsagm-map

Having issues with the background image on the homepage not displaying correctly?

Having trouble with the background image not displaying correctly even when set to 100%? https://i.sstatic.net/eavwX.png I'm currently using Angular and Bootstrap 4 for this project. <!--html code--> <div class="bg"> <div style="text ...

htmlcssangularbootstrap-4