How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code:


    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.metisMenu.js"></script>
    <script src="assets/js/custom.js"></script>


body{
  font-family: 'Montserrat', sans-serif;
  margin:0;
  background-image: url("background.jpg ");
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  min-height: 100vh;
}
.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  float: left;
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s;
  background-size: 200% auto;
  color: black;

 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 0px #eee;
  border-radius: 30px;
}

/* Demo Stuff End -> */

Good Services Delivery



You can view my current index.php layout https://i.sstatic.net/NgJBy.jpg.

I am seeking advice on how to effectively center my buttons on the page. Any suggestions?

javascriptjqueryhtmlcss

Answer №1

To easily center the .main-panel within the parent element, utilize Flexbox on the body element. This approach eliminates the need for unnecessary br tags and removes the deprecated center element. Additionally, implement column-count: 3; on the .parent div containing the a tags.

body {
  display: flex; /* added */
  justify-content: center; /* added */
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  background-image: url("background.jpg ");
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  min-height: 100vh;
}
/* added */
.main-panel > h1 {
  text-align: center;
}

.main-panel > .parent {
  column-count: 3;
  padding: 0 10px;
}

.main-panel > .parent > a {
  display: block;
}
/****/
.btn {
  flex: 1 1 auto;
  /* margin: 10px; */
  margin-bottom: 10px; /* added */
  padding: 30px;
  /* float: left; */
  text-align: center;
  text-transform: uppercase;
  transition: 0.2s;
  background-size: 200% auto;
  color: black;
  /* text-shadow: 0 0 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 0 #eee;
  border-radius: 30px;
}

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #84fab0 0%, #1aff1a 51%, #84fab0 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #d147a3 51%, #a1c4fd 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffecd2 0%, #ff1a75 51%, #ffecd2 100%);
}

.btn-6 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
/* added */
@media screen and (max-width: 568px) {
  .main-panel > .parent {
    column-count: 2;
  }
}
<div class="main-panel">
  <h1> Good Services Delivery</h1>
  <div class="parent">
    <a class="btn btn-1">Arrival & Emergency</a>
    <a class="btn btn-2">Obstetric & Gynecology</a>
    <a class="btn btn-3">WAD</a>
    <a class="btn btn-4">Ortopedik & Medikal </a>
    <a class="btn btn-5">Pediatrik</a>
    <a class="btn btn-6">Mortuary</a>
  </div>
</div>

Answer №2

In HTML 5, the center tag is not supported. However, achieving a centered layout can be easily done using Bootstrap.

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
!-- language: lang-css -->

     body{
      font-family: 'Montserrat', sans-serif;
      margin:0;
      background-image: url("background.jpg ");

    }
    .btn {
      flex: 1 1 auto;
      margin: 10px;
      padding: 30px;
      float: left;
      text-align: center;
      text-transform: uppercase;
      transition: 0.2s;
      background-size: 200% auto;
      color: black;


     /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
      box-shadow: 0 0 0px #eee;
      border-radius: 30px;
     }

    /* Demo Stuff End -> */

    /* <- Magic Stuff Start */

    .btn:hover {
      background-position: right center; /* change the direction of the change here */
    }

    .btn-1 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }

    .btn-2 {
      background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
    }

    .btn-3 {
      background-image: linear-gradient(to right, #84fab0 0%, #1aff1a 51%, #84fab0 100%);
    }

    .btn-4 {
      background-image: linear-gradient(to right, #a1c4fd 0%, #d147a3 51%, #a1c4fd 100%);
    }

    .btn-5 {
     background-image: linear-gradient(to right, #ffecd2 0%, #ff1a75 51%, #ffecd2 100%);
    }

    .btn-6 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }  

    .main-panel{
        text-align: center;
    } 
</style>
</head>

<body>




<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->



    <div class="main-panel">

      <h1> Good Services Delivery</h1>

      <br /><br />

         <div class="container-fluid">
                             <div class="row col-md-offset-3">              
                             <a class="btn btn-1 col-md-4">Arrival & Emergency</a>
                             <a class="btn btn-2 col-md-4">Obstetric & Gynecology</a>
                             </div>

                             <div class="row col-md-offset-3">
                             <a class="btn btn-3 col-md-4">WAD</a>
                             <a class="btn btn-4 col-md-4">Ortopedik & Medikal </a>
                             </div>

                             <div class="row col-md-offset-3">
                             <a class="btn btn-5 col-md-4">Pediatrik</a>
                             <a class="btn btn-6 col-md-4">Mortuary</a>
                            </div>

        </div>

    </div>


</body>
</html>

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

Array logging mistakenly outputs a number

I needed to access the data from JSON outside of the xml function so that I could use it in multiple functions. When I initially logged the data, it displayed arrays with objects in it. However, when I checked the length instead, it returned zero. After re ...

javascriptarraysjsonxmlpromise

Transfer both FormData object as well as an extra parameter through an AJAX request

I have successfully sent a FormData object like this: var formData = new FormData(); formData.append('file', this.files[0]); $.ajax({ url: urlUploadProductsFile, type: 'POST', data: formData, cache: false, contentType: f ...

jqueryjsonajaxform-data

Can you explain how to achieve auto-assigning arrays in JavaScript similar to the PHP feature?

I'm seeking a way to update a JavaScript array automatically, without specifying a key as a number or string. The value should simply take the next available numeric key in the array. In PHP, you can achieve this using: <? myarray = array(); mya ...

phpjavascriptarrays

Using regular expressions in JavaScript to work with numbers separated by commas, as well as their comparison operators such as greater than, greater than or

Currently, I have implemented this Regex pattern to validate numbers with decimals (comma separated) /(^\d*\,?\d*[1-9]+\d*$)|(^[1-9]+\d*\,\d*$)/ However, I am now faced with the need to modify it in order to also valida ...

javascriptjqueryregex

Avoiding page refresh while utilizing the ng5-slider component in Angular

I am currently working with an ng5-slider that has a customizable range from 0 to 1000. However, I have encountered an issue when adjusting the slider at the bottom of the page - it refreshes and automatically takes me back to the top of the page. I would ...

javascriptangular

How can I extract text from nested HTML elements with a <a href> tag using the Jericho library?

Here is a snippet of my HTML code: <div class="itm hasOverlay lastrow"> <a id="3:LE343SPABGLIANID" class="itm-link itm-drk trackingOnClick" title="League Sepatu Casual Geof S/L LO - Hitam/Biru" href="league-sepatu-casual-geof-sl-lo-hitambiru-6816 ...

javahtmlparsingjericho-html-parser

HTML - Link to enable automatic printing of the page

Assignment: Develop a hyperlink (HTML <a> tag) that triggers the printing of the webpage without the user manually pressing CTRL + P. My search for information on this topic has not yielded a definitive answer. Some sources suggest using JavaScript ...

htmlprinting

What is the most effective way to use checkboxes to apply multiple filters to an array of objects?

Let me simplify the description. Within the App component, I fetch data from a JSON file and store it in the flightsList array. My goal is to filter this array based on checkboxes selected in the FlightOptions and Airlines components. The issue that I&a ...

javascriptvue.jsfilter

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

javascripthtmlcssd3.jsless

I'm currently facing an issue with toggling the visibility of a div using JavaScript

In my attempt to create a unique custom select menu using html, css, and javascript, I encountered an issue with toggling the display style of the div containing the options when clicking on the button (in this case, an arrow). HTML: <ul class="de ...

javascripthtmlcss

Is there a way to trigger a JavaScript function once AJAX finishes loading content?

I've been utilizing some code for implementing infinite scrolling on a Tumblr blog through AJAX, and it's been performing well except for the loading of specific Flash content. The script for the infinite scroll can be found here. To address the ...

javascriptjqueryajaxflashtumblr

Generate Bootstrap 5 Navbar <li> and <ul dropdown item> dynamically using JavaScript

Requesting assistance I have stored text in the constant.js file as shown below. export const navLinks = [ { id: "manage", title: "Manage", }, { id: "transactions", title: "Tran ...

javascripthtmlreactjsbootstrap-5

Is it possible to implement Photoshop-inspired color curves filters on an HTML tag?

I am attempting to recreate the color curves filter from Photoshop using an HTML video tag. https://i.stack.imgur.com/erB1C.png The solution closest to what I need so far is how to simulate Photoshop's RGB levels with CSS and SVG Filters, but it doe ...

htmlcsscolorscurvesvg-filters

Revamp the Design Layout of a Drag-and-Drop Tool

After experimenting with a drag and drop feature using jQuery, I discovered the following useful code snippet. Here's how it functions: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); #so ...

javascriptjquery

Locate an element within the identical div that shares the same class

I want to dynamically add content inside a specific div by targeting its class name only after the user clicks on an element. Here is the layout structure: <div class="wrap"> <div class="divOne"> <div class="divOneItem">< ...

jquery

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

Differences between .php and .html: What causes variations in IE rendering?

After duplicating one of the HTML pages in my project, I simply changed the file extension from .html to .php. Surprisingly, all browsers display the page identically except for Internet Explorer (IE), which seems to handle the pages differently based on t ...

phphtmlinternet-explorer

When incorporating babel-plugin-styled-components, Nextjs may encounter a mismatch error with classnames

After transferring the content of _document.js from the following styled components example and implementing the babel plugin mentioned in the styled components documentation, I am still encountering an error. _document.js import Document from 'next/ ...

javascriptreactjsnext.jsserver-side-renderingstyled-components

Can we retrieve props that have not been explicitly passed down?

How can I access the prop "showPopover" from the constructor or another method? This prop was originally created in a separate component and now that I've integrated it into this component, I'm looking for a way to easily retrieve and modify it. ...

javascriptnode.jsreactjsreact-redux

Is there a way to modify the dimensions of this container? (CSS)

After performing a search and clicking on a result, a white bubble pops up on the map. I am looking to use CSS to make this bubble smaller as it is currently too large. Can anyone provide guidance on how to achieve this? ...

javascriptjqueryhtmlcssgoogle-maps