Aligning buttons in a div container

Hey everyone, I could really use some assistance with a problem I'm encountering.

If you need to see the issue in action, you can visit:

The challenge I'm facing is trying to align three boxes side by side at the center of the page.

<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> MEDIA</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> STUDIO</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> DESIGN</a>
</div>

Css for wrapper

.wrapper {  
    padding-top: 100px;
    text-align: center;
}

Css for spacer

.spacer {
    display: inline;
    margin: 50px 50px;
    position: relative;
    text-align: center;
}

Your help would be greatly appreciated!

htmlcssbuttonlayout

Answer №1

Don't waste your time with unnecessary spacing divs, HTML should not be used for styling.

Simply add display: inline-block to your links and apply margins to achieve the desired spacing.

Here is an example of how to structure your HTML:

<div class="wrapper">
    <a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">MEDIA</a>
    <a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">STUDIO</a>
    <a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">DESIGN</a>
</div>

And here is the CSS needed to style it:

.wrapper { 
    text-align: center; 
}

.wrapper .btn {
    display: inline-block;
    margin: 50px 25px;
}

View a working demo here.

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

Is there a way to invoke a function within a mat-error element?

I need to display an error message in my input field! The function will return true if both passwords match, otherwise it will return false. How can I invoke a boolean function inside mat-error! My Function: checkPasswords(): Boolean { // 'passwords& ...

htmlangulartypescript

Adjust image placement when resizing the window or rotating a mobile device

When the window is maximized or the phone is in portrait position, the magnifying glass stays in its place. However, when I resize the window or rotate the mobile phone, the position of the magnifying glass changes. I've tried using different units ...

htmlcss

When trying to use ngModel with Angular, an error occurs where the property 'selected' cannot be created on a string

I'm currently attempting to utilize [(ngModel)] in the following manner: <div class="items"> <tbody> <tr *ngFor="let info of this.information"> <td> <input type="checkbox" [(ngModel)]="this.info.n ...

htmlangularangular-ngmodel

What is the most effective method for transferring data to a concealed input field?

I currently have a webpage with dual forms - one on the main page and another within a Bootstrap modal. The primary form includes fields like "Neck, Chest, Waist," while the modal's form only has an email field. To streamline the submission process, ...

javascriptjqueryhtmlinputhidden-field

Changes in bottom position when scrolling in landscape mode on iOS Safari

I'm currently using ReactJS and have implemented a mobile menu bar with CSS properties position: fixed and bottom: 0. The menu bar stays locked at the bottom of the page in both portrait and landscape orientations on all browsers except for Safari. I ...

cssreactjsscrollcss-positionmobile-safari

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

c#htmlasp.net-mvcasp.net-mvc-5

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

cssangulartypescriptangular-materialangular9

What is the best way to smoothly enlarge a div as new content is introduced?

Is there a way to smoothly expand a div when new content is added? const [render, setRender] = useState(false) const showHide= () => { setRender(!render) } return ( <div className="container"> <h1>TEST ...

javascripthtmlcssreactjs

Apply an active navigation class depending on the current URL in the session

Is there a way to dynamically add an .active class (font-weight:700;) to the active pages navigation menu based on the category in the URL? The system url is constructed using session and category parameters. For example, the homepage for logged-in users ...

javascriptcss

Tips on centering images of any size within a frame

I am attempting to place an image within a frame. DESIGN #wrapper { border: 2px solid black; width: 600px; height: 400px; overflow:hidden; position: relative; display: inline-block; } img{ p ...

htmlcss

VUE 3 inexplicably failing to display the custom component's template, console remains error-free

I am utilizing flask, html, js for building a web application. I am currently facing an issue where the template defined in the component <add-movie> within movies.js is not being rendered into add_movies.html. The add_movies.html extends base_admin ...

javascripthtmlvue.jsflaskvuejs3

Error message: "When namedPlaceHolder parameter is disabled, bind parameters must be in the form of an

Currently revamping my query due to a crucial API redesign. With the presence of a "file" as multipart/form-data, I found the need for a form handler since NextJS lacked one. After some workarounds with "multiparty", now I can successfully parse the incomi ...

javascripthtmlmysqlnext.js

A guide on how to navigate the parent window from a child window

When using my application, I have a function that opens a new window like this: window.open("www.example.com"); Within the new window, there is a button. Upon clicking this button, the new window should close and then redirect the parent window to a diff ...

javascripthtmlbrowser

Utilizing Font Awesome for social icons in a Vue component display

Currently, I'm in the process of building my own website and making the switch from traditional HTML, CSS, and JS to using VueJs. I've hit a roadblock when trying to transfer some code from my original HTML file to a Vue JS component, specificall ...

javascripthtmlvue.jswebfont-awesome

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

I am attempting to develop a Miles Per Gallon (MPG) calculator using Javascript. However, I'm encountering difficulties with displaying the results once the "Calculate" button is pressed. <html> <head> <title> MPG Calculator </ti ...

javascripthtmlcss

The size of table cells unexpectedly shifts following a click event

As I construct a table dynamically using JS, I encounter an issue where clicking on the btn_dropdown0 button causes it to shift slightly to the left and right. This anomaly occurs because the two empty th elements are resizing when the tbody is toggled to ...

javascriptjqueryhtmlcss

Is it possible for HTML to provide alternative text for unique characters, such as accented characters?

I have a vision for HTML support that may incorporate the following: <span alt="Antonin Dvorak">Anton&iacute;n Dvo&#345;&aacute;k</span> In this scenario, if a browser cannot display special characters, it would default to showing ...

htmlhtml-entities

Personalized Styling for Dropdown Lists (Using CSS/JS with ASP.NET C# Integration)

Currently my ASP.net DropdownList is set up like this: <asp:DropDownList ID="CourseSelectionDropdown" DataTextField="DropdownDisplay" DataValueField="CourseId" runat="server" Font-Size="Small" Width="250px" OnSelectedIndexChanged="CourseSel ...

c#javascriptasp.netcss

Leveraging HTML::Template inside a value attribute

Could someone please help me understand how to use an HTML::Template tag within a form field value in order to dynamically change that field? For example: <table border="0" cellpadding="8" cellspacing="1"> <tr> <td align= ...

htmlperltemplates

PHP - Extract Information from Table Upon Form Submission without User Input

I'm facing a challenge with my web form that includes a table allowing users to delete rows before submitting. Although there are no input fields in the table, I need to capture the data from these rows when the form is submitted. The issue is that th ...

javascriptphphtml