What is the best way to center these two buttons within a div?

Is there a way to ensure that the two buttons align properly within their parent div, which has a fixed width defined as either a specific number or percentage? A visual representation of what I am seeking can be viewed in the image below:

https://i.sstatic.net/C0aQX.png

If you prefer a quick link to access this information:

http://jsfiddle.net/1wvy5yuy/

Here is the code snippet provided for reference:

.fastsharetw,
.fastsharefb {
  background: #3B5998;
  color: #FFF;
  padding: 15px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  float: left;
  width: 60%;
}
.fastsharetw {
  background: #00aced;
  float: left;
  width: 30px;
  padding: 10px 7px 6px 8px;
}
a.fastsharetw,
a.fastsharefb {
  color: #fff
}
#fast-wrap {
  border: 1px solid #f00;
  width: 600px
}
<div id="fast-wrap">
  <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a>
  <a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
      <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path>
    </svg>
  </a>
  <div style="clear:both;"></div>
</div>

htmlcss

Answer №1

.element {
  display: flex;
  justify-content: center;
}

By using flexbox, you can easily center any element horizontally. Give it a go!

Answer №2

To center align an element, use the CSS properties margin-left: auto; and margin-right: auto; instead of using float

Answer №3

For the solution, apply text-align: center to the container and display: inline-block to the child elements while removing floats.

.fastsharetw,
.fastsharefb {
  background: #3B5998;
  color: #FFF;
  padding: 15px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  width: 60%;
}
.fastsharetw {
  background: #00aced;
  width: 30px;
  padding: 10px 7px 6px 8px;
}
.fastsharefb {
  text-align: left;
}
a.fastsharetw,
a.fastsharefb {
  color: #fff
}
#fast-wrap {
  border: 1px solid #f00;
  width: 600px;
  text-align: center;
}
<div id="fast-wrap">
  <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a><a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
      <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path>
    </svg>
  </a>
  <div style="clear:both;"></div>
</div>

Answer №4

To achieve the desired layout, you can utilize the following approach by applying display:inline-block; and text-align:center;

.fastsharetw,
.fastsharefb {
  background: #3B5998;
  color: #FFF;
  padding: 15px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: 60%;
}
.fastsharetw {
  background: #00aced;
  width: 30px;
  padding: 10px 7px 6px 8px;
}
a.fastsharetw,
a.fastsharefb {
  color: #fff;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
#fast-wrap {
  border: 1px solid #f00;
  width: 600px;
    text-align:center;
}
<div id="fast-wrap">
  <a href="http://www.facebook.com/sharer.php?u=http://www.google.com/" target="_blank" class="fastsharefb">Share on Facebook</a><a href="http://twitter.com/share?text=test page" target="_blank" class="fastsharetw">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
      <path style="fill:#fff" d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path>
    </svg>
  </a>
  <div style="clear:both;"></div>
</div>

Answer №5

To achieve the desired layout, include the following CSS code: margin-left:53px;

Don't forget to share on Facebook!

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

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

javascripthtmlcssinternet-explorer

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

javascripthtmlcorsweb-worker

Is there a way to click on a button and have its background color change randomly each time?

I am facing an issue with a button on my HTML page. When the button is clicked, I want its background color to change to a random different color. However, despite trying various sources, I am unable to get it right. It seems like I am not placing the code ...

javascripthtmlcss

Bone structure template - optimizing list spacing with CSS

Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...

htmlcsslistalignment

Javascript has trouble processing data coming from an HTML input field

I am struggling to make my JavaScript code work with the input from my HTML input tag. The purpose of this program is for the user to input a number, and then the program will determine whether the number is positive, negative, or zero. Below is the code ...

javascripthtml

Can the script be loaded into a TypeScript file?

I'm currently in the process of integrating this script tag into my Angular 2 project, but I'm searching for a way to incorporate it into the typescript file so that I can access its methods within the .ts file. <script type="text/javascript" ...

javascripthtmlangulartypescript

Issue with displaying and hiding list elements using jQuery

I am attempting to create an accordion feature using <li> elements with classes .level1, .level2, .level3, and so on. The problem I am encountering is that when I click on a .level2 element, the items hide correctly until the next .level2 element wit ...

javascriptjqueryhtml

Utilize express middleware for applying CSS styles in web development

How's it going? I've been experimenting with middleware in Express JS, like this: app.get ('/user/:school/:dual', function (req, res, next) {   ......   ...   ...... }); Everything seems to be working fine so far. But when I na ...

cssnode.jsexpressmiddleware

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...

javascriptjqueryhtmlcssalgorithm

Using jQuery to Retrieve Check Box Labels and Populate Them into Textboxes

I would like to display the name of the selected checkbox label in a textbox. If multiple checkboxes are selected, I want their labels to be separated by commas and displayed in the textbox. Please excuse my poor English. $(document).ready(function() { ...

jqueryhtmlcss

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

javascriptjquerycssresponsive-slides

Overlapping Flexbox elements causing stacking issues

My attempt to create a gallery layout with two larger blocks amidst smaller blocks is not functioning correctly. The large block is overlapping the two smaller blocks below it. Is there a way to prevent block overlapping using CSS? I have searched Stack O ...

cssuser-interfaceflexboxoverlapping

Selected jQuery plugin is not updating HTML select option

I've been attempting to update the select tag in my HTML file to match the style used in the example on the Chosen v1.8.7 website, but despite following the instructions, the select element remains unchanged: test.html <head> <link rel=& ...

javascripthtmljqueryjquery-chosen

Ways to decrease the spacing between lines in a table row

I am trying to decrease the line height between table rows, but the code I used didn't work. Can you please take a look at the image? Specifically, I want to reduce the space between "Mon-Sat 09:00 AM - 7:00 PM" and "We closed Sunday &a ...

htmlcss

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

htmlcss

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

cssreactjscss-animationsreact-transition-group

Exploring the Benefits of Incorporating Multiple Navigations into a JQuery Slider

I'm looking to enhance the functionality of the main slider on this particular page. Currently, there are left and right arrows as well as grey and blue boxes underneath that allow users to navigate between four slides (which repeat using only two ima ...

jquerycssslider

JavaScript and HTML code for clipboard functionality without the need for Flash

My challenge lies in creating a grid with numerous columns and data. The user has expressed the desire for a copy to clipboard button that will allow them to easily copy the data. Can anyone suggest ways to implement Copy to Clipboard functionality withou ...

javascriptjqueryhtmlclipboard

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

htmlcss