Looking to align three divs side by side in the center

My goal is to have three buttons aligned side by side, but I want them center-aligned instead of floated to the left. I have already set the display to inline-block and vertical align to top.

div.rotateBtn input {
  background-image: url("");
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

.alignme {
  width: 1000px;
  height: 1000px;
  text-align: center;
}
<div class="alignme">

  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</div>

If you want to see the code in action, check out the fiddle: https://jsfiddle.net/4sgakgck/

htmlcss

Answer №1

Your display:inline block is not correctly applied.

Consider using the following CSS:

.alignme {
  text-align: center;
}

.alignme > div {
  display: inline-block;
}

For example:

div.rotateBtn input {
  background-image: url("");
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

.alignme {
  height: 1000px;
  text-align: center;
}

.alignme > div {
  display: inline-block;
}
<div class="alignme">

  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</div>

Answer №2

You have the option to utilize flexbox.

div.rotateBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}
div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}
div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}
.alignme {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
<div class="alignme">
  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</div>

Answer №3

  • List item

div.rotateBtn input {
  background-image: url("");
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

.alignme {
  width: 1000px;
  height: 1000px;
  text-align: center;
}
<div class="alignme">

  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</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

Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out! Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY" ...

javascripthtmlcss

Can $refs cause issues with interpolation?

I'm currently learning Vue.js and the course instructor mentioned that modifying the DOM element using $refs should not affect interpolation. In fact, any changes made directly to the DOM will be overridden by interpolation if it exists. However, in m ...

javascripthtmlvue.js

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code

I'm experimenting with adding the font awesome paypal icon <i class="fa fa-paypal" ></i> before the PAY WITH PAYPAL text on my button. You can see a similar setup on this page with the shopping cart icon <i class="fa fa-shopping-cart"& ...

htmlpaypalfont-awesome

How to conceal certain sections of HTML using jQuery

Currently, I am in the process of creating a "news" page for a website. My goal is to only show the first 15 lines of each news article when the page is loaded, creating a neat appearance for visitors. After the 15th line, I include a "read more" link tha ...

jqueryhtmlcss

What is the best way to incorporate a Bootstrap spinner icon in the center of a webpage's background?

Every time my HTML page reloads, I want to display a background loader icon. Although I have tried using the Bootstrap spinner icon, I'm facing difficulties in positioning it at the center of the page. <html> <style> .overlay { back ...

htmlcss

Tips for positioning the bootstrap navbar correctly inside a container

I am having some trouble with my HTML page layout. I have a fixed Bootstrap navbar and a container with a width of 1000px. I'm trying to place the navbar inside the container, but it's not working as expected. The navbar is still taking up the fu ...

htmlbootstrap-4

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

javascriptjqueryhtmlcssjquery-mobile

Ways to ensure that both the Search text field and search button are of equal height

I am facing an issue with the layout of my HTML code within my ASP.NET MVC web application. Below is the snippet of code causing the problem: <form class="customSearch" method="GET" action="@Url.Action("Search", "Home")"> <input class="searchIn ...

csshtml

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

Within a dynamic-height parent div, I have two cards stacked on top of each other. However, the issue arises when these two cards do not completely fit inside the parent div. The problem likely stems from the table within the lower card, which is not respo ...

htmlcssangularbootstrap-4

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

javascriptjqueryhtmlcsswordpress

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

javascriptjqueryhtmljsongson

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

Issue with Laravel Blade template not linking CSS files in a subfolder

I am currently facing an issue where the CSS file path in my code is incorrect. The code I have is: {{HTML::style('css/bootstrap/bootstrap.min.css')}} When rendered in the source code, it displays as: http://www.view.local/laravel/css/bootstra ...

htmlcsslaravellaravel-4

What is the process for assigning a background color to a specific option?

Trying to create a dropdown menu with various options and colors. Managed to set background colors for each option, but once an option is selected, the background color disappears. Is there a way to fix this issue? See my HTML example below: <select> ...

javascripthtmlcss

Switch the checkbox attribute for multiple items within a carousel using Angular 2/Typescript

I am currently working on a carousel feature where each item has a checkbox above it. My goal is to be able to click on an item and have its corresponding checkbox checked. The current code successfully achieves this, but the issue I'm facing is that ...

htmlangulartypescript

CSS Dropping Down Menu Design

Hello everyone! I am taking my first step into web development and currently in the process of revamping my DJ website. Check out my updated site here: I am working on creating a dropdown div within the top-left menu that will display information about t ...

cssdrop-down-menu

Issue with the alignment of form input fields and buttons in Mozilla Firefox

Fixing Form Field Alignment Issue in Firefox After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to mo ...

csssymfonylesstwigstyling

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

javascripthtmlangulartypescript

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

javascriptjqueryhtmlcss