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

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

View content from a text file on a webpage

Hi everyone, I could really use some assistance with a project I'm currently working on. As someone who is new to programming, I am facing a challenge. My goal is to showcase the contents of a plain text file on a webpage. This text file, titled titl ...

What is the best method for creating a loop script within a widget using script?

I am trying to implement a loop within a widget, however, the widget contains an internal script: <!DOCTYPE html> <html><head></head><body> <script> list=["AMAR3","BBDC4", "BEEF3", "BPAN4", "BRFS3", "B3SA3", "CVCB3" ...

Is it acceptable to utilize a UUID as an HTML tag ID without encountering any problems?

I need to handle dynamic content accessible through an index on a side panel. When a user selects an element from the side panel, I use the ID to determine which data they're requesting so that I can generate the corresponding content for the main sec ...

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

Creating resizable SVG elements using HTML or CSS for dynamic width and height

Is there a way to give my SVG element dynamic width and height in order to display the entire SVG image? For example, take a look at this CodePen link. <svg width="250" height="250" viewBox="0 0 250 250"> Alternatively, .svg { width : 250px; ...

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

Adding columns dynamically to a table using ASP.NET Core 6

I am currently working on a project for my university, and I need to design a dynamic table with columns that can be added as needed. Each row should have a maximum of 4 columns before moving on to the next row and continuing the process until completion. ...

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

I have two questions regarding the implementation of tsParticles in my React application. First question: <Particles id="tsparticles" options={{ background: { color: { value: "black&quo ...

Saving Style Sheets in a Database

Currently, I am interested in saving CSS data in a mySql database as part of my LAMP setup. My intention is to create an input field that includes the following code: body{ background: url("http://google.com/image.jpg") no-repeat; color: orange; } #someDi ...

Arranging SVG icons in a row within the navigation bar

Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...

Unselect all options in Angular's multiple selection feature

Objective: My goal is to ensure that when I invoke the myMethod() function, all options are unselected. Current Issue: Currently, calling myMethod() will only deselect the last option, leaving the others selected if they were previously selected. Possibl ...

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

Reset a form input using jQuery

There is an ajax method in place that reloads only a specific div upon receiving a service response. success: function (response) { $( "#list" ).load(window.location.href + " #list" ); $( "#badge" ).load(window.location.href + " #badge" ); $ ...

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...