What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/

I'm having trouble getting this to work properly. Any assistance would be greatly appreciated.

Here is the HTML code snippet:

<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

And here is the CSS code snippet:

.button1,
.button2,
.button3,
.button4    {
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}

Answer №1

Check out this JSFiddle link

I updated the button styles by changing them to display: inline-block, removing floats, and adding text-align: center to the parent container.

.button1,
.button2,
.button3,
.button4
{
    background:#999;
    padding:6px;
    display: inline-block; // Changed from "block"
    margin-right:5px;
    // Removed floats    
}

#button
{
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; // Added central alignment to content
}
<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

Answer №2

Check out this CSS snippet:

.btn1,
.btn2,
.btn3,
.btn4    {
    background-color: #999;
    padding: 6px;
    display: block;
    float: left;
    margin-right: 5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin: 0 auto;
}

Answer №3

Give this a shot:

.btn a{
display:block;
 margin:auto;}

Answer №4

Try eliminating the "display: block" and "float:left" properties from the buttons, and include "text-align: center" in the #button style declaration.

Using "inline-block" may not be compatible with all browsers, so it's advisable to avoid unless absolutely necessary.

Answer №5

Give this a shot. It could potentially solve the issue:

#button a{display:block;margin:0 auto !important;text-align:center !important;}

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

Unable to eliminate the border gaps in the table

I'm having trouble getting the picture and grey area in the example attached to stay together and be the same height. The border-spacing seems to be causing an issue. Any suggestions on how to fix this? Apologies for the messy style sheet. Here' ...

Revising Division Based on Input Number

I need to update a div every time the number input is changed. The number input looks like this: <input type="number" name="year" id="year" min="2013" value="2013"> Although I tried adding some code for this, it doesn't seem to work. Can anyo ...

Is there a way to show a fallback message for unsupported video file formats?

When incorporating a video element on my webpage, I typically use the following code: <video src="some source" controls> Error message </video> Based on my knowledge, the "Error message" will only appear if the browser does not support the ...

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

Two divisions inside another "wrapper" division - Adjusting the width

I'm facing an issue with my CSS. I have a container div "container" that contains two other divs - "left" and "main". The width of the container is set to 90% of the body's width, with a margin of 3% auto to center it. .container{ margin:3% auto ...

Finding the index of a selected option in node.js can be achieved using express

I am trying to retrieve the index of the selected object using Express and log it in app.js example.html <form id="tableForm" action="getJson"> <select class="example" name="example"> <option name="table1" value="1"& ...

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

Replicate the styling of CSS class A and apply it to class B

Let's take a look at some code: <button id="test" class="ui-state-hover" value="Button"> In Context: I'm utilizing the JQuery UI CSS class ui-state-hover on an HTML button to ensure it always appears as if it's being hovered over. H ...

Customize each carousel item by adding a unique background image to enhance the visual appeal

I'm looking to customize my Bootstrap carousel by adding unique background images to each item. Here's a snippet of my HTML: <!-- Start of carousel --> <div id="mainCarousel" class="carousel slide carousel-fade" d ...

Having trouble getting the HTML5 Video to play using the AngularJS ng-src tag?

There seems to be an issue with AngularJS ng-src not working properly with the HTML5 Video element in this specific fiddle: http://jsfiddle.net/FsHah/5/ Upon inspecting the video element, it appears that the src tag is correctly filled with the appropriat ...

iFrame initially loads the page and subsequently reloads it continuously in a separate tab

Encountering a strange issue with IE11 regarding a series of links: <a href="page1.html" target="iframe_name">Page #1</a> <a href="page2.html" target="iframe_name">Page #2</a> <a href="page3.html" target="iframe_name">Page #3 ...

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

To better illustrate my goal, refer to this image: Desired Output <\b> Currently, I'm achieving this: current output Imagine 7 rows of data with two columns each. The issue arises in row 1, column 2 where the control needs to span 5 row ...

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

Choose an XPath formula that will target every single element, text node, and comment node in the original sequence

How can we write an XPath expression that selects all elements, text nodes, and comment nodes in the order they appear in the document? The code below selects all elements but not text nodes and comment nodes: let result = document.evaluate('//*&apo ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

Mobile responsiveness issues with Bootstrap 4 row

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS ...

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...