Use CSS to position three buttons in the center of a row by aligning them horizontally

I need help aligning three buttons in the same row and centered vertically. I want them to be aligned in the same way as the text "Select your attack:" Please advise on how to achieve this alignment.

.prompt_user_to_choose {
  margin: 0;
  display: flex;
  justify-content: center;
  min-height: 10vh;
  align-items: center;
  text-align: center;
  font-size: 25px;
}
.results {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  text-align: center;
  font-size: 25px;
}
.Rock {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255, 60, 60);
}

.Paper {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(105, 255, 105);
}

.Scissors {
  width: 90px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: rgb(36, 186, 255);
}

This is the current layout: https://i.sstatic.net/RU4r8.png

This is the desired layout: https://i.sstatic.net/GGQsE.png

csscenter

Answer №1

To create a neat layout for the three buttons, consider using a flex container. Here's a simple CSS code snippet to achieve the desired alignment:

.container {
    display: flex;
    justify-content: center;
    align-items: 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

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

htmlcssformsbootstrap-4

Trouble with selecting a color from the picker tool

Working with HTML markup often presents challenges, especially when it comes to using a color picker on Mac OS. I find that trying to match the exact background color of a div element by picking up color from an image can be tricky. After using the Mac co ...

htmlcss

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap

Elastic video player embedded in a flexbox

I'm having an issue trying to make a responsive YouTube embed work inside a flex container alongside other content. The problem is that the container for the YouTube embed doesn't resize properly and ends up overlapping with other elements. To be ...

cssreactjsflexboxmaterial-ui

Guide to adjusting the camera rotation in Three.js

I successfully created a 3D cone using CSS3Renderer and TrackballControl. You can see it in action here: Now, I am looking to enhance the user experience by allowing them to input values to control the camera rotation instead of relying on TrackballContro ...

css3dthree.jsuser-input

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to align the height of a standard column with the ng-include section to ensure a cohesive page display?

I have been working on my Angular app and have implemented ng-include to dynamically add content to a template within the page. The issue I'm facing is that this specific area ends up being longer than both the html and body elements where it resides. ...

htmlcssangularjs

Boosting the specificity of Material UI override styles

I came across a question about Material UI Overriding styles with increased specificity that seemed related to my issue, but I couldn't apply the solution to my problem. My problem involves a vertical Slider with marks, and I am trying to remove the ...

cssreactjsmaterial-ui

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

javascripthtmlcss

An interactive top navigation bar paired with three dynamic columns housing scrollable content, all crafted seamlessly with Bootstrap 4

I recently updated my layout using bootstrap but I am facing a glitch. I want the layout to have fixed scrolling only within the columns, without affecting the entire page. Everything works fine until I add some text inside any of the columns, then the who ...

cssbootstrap-4

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

cssbootstrap-4

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an image: <div style="display:inline-block;vertical-align:bottom"> <p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p> </div> ...

htmlcssimagepositioning

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

javascriptcssreactjsnext.jstailwind-css

Issue where the background color remains the same and does not change

I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS: body { background-color: black; padding: 0px; margin:0px; height: 1500px; } However, it doesn't seem to ...

htmlcssbackground-colorstatic-pages

Looking for advice on using media queries to resize my background image - any tips?

I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...

htmlcssresponsive-designmedia-queriesbackground-image

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

htmlcsswebweb-deployment

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

javascriptjqueryhtmlcsstwitter-bootstrap

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo

encasing a snippet of code within a customized hyperlink

Here's the following "embed code" for an Instagram photo featuring Kim Kardashian. I'm curious - how can one encapsulate this embed code within an <a> tag (or another tag) so that clicking on the image will redirect to www.google.com? < ...

javascriptjqueryhtmlcss