Aligning the content in the center of a div with inline display

Hi there, I have a quick question for the experts out there. I'm new to all of this so please bear with me :)

I'm attempting to center an inline social sharing div on my website, but it's proving to be quite challenging. The div is nested within other centered divs, yet it stubbornly remains aligned to the left side.

Below is the HTML code snippet:

#share-buttons img {
      width: 35px;
      padding: 5px;
      border: 0;
      box-shadow: 0;
      display: inline;
      text-align: center;
    }
<div id="share-buttons">
    
        // Share Button Links Here
        
    </div>

While I can easily center them, they end up stacking on top of each other. It's probably a simple fix, but I'm struggling to figure it out.

Any help or guidance would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

.centered-buttons{text-align:center;}

Include this code snippet to center buttons on the web page.

Answer №2

Make sure to include the display:flex property in the wrapper element.

#share-buttons {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  align-items: center;
  -webkit-align-items: center;
  /* Safari 6.1+ */
}


#share-buttons img {
  width: 35px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
  text-align: center;
}

#share-buttons {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  align-items: center;
  -webkit-align-items: center;
  /* Safari 6.1+ */
}
<div id="share-buttons">
  <a href="mailto:?Subject=Simple Share 
  Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 
      https://auto-glanz.co.uk/how-to-use-a-clay-bar">
    <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
  </a>


  <a href="http://www.facebook.com/sharer.php?u=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
  </a>


  <a href="https://plus.google.com/share?url=https://auto-glanz.co.uk/how-
      to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
  </a>


  <a href="http://www.linkedin.com/shareArticle?
      mini=true&amp;url=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
  </a>


  <a href="javascript:void((function()%7Bvar%20e=document.createElement
    ('script');e.
    setAttribute('type','text/javascript');e.setAttribute
    ('charset','UTF-
    8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
    r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
    <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
  </a>


  <a href="http://reddit.com/submit?url=https://auto-glanz.co.uk/how-to-
      use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" />
  </a>


  <a href="http://www.stumbleupon.com/submit?url=https://auto-
      glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" />
  </a>


  <a href="http://www.tumblr.com/share/link?url=https://auto-
      glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" />
  </a>


  <a href="https://twitter.com/share?url=https://auto-glanz.co.uk/how-to-
      use-a-clay-bar&amp;text=Clay%20Bar%20Guide&amp;hashtags=claybarguide" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
  </a>


  <a href="javascript:;" onclick="window.print()">
    <img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" />
  </a>


</div>

Answer №3

To center align the share buttons, use the following CSS:

#share-buttons{
  text-align: center;
}

Check out this link for more information:

https://jsfiddle.net/amzdLxc4/2/

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

PHP pattern substitution [ replace ]

Seeking assistance with two cases involving regular expressions in HTML code editing [parsing]. I currently use a parser with the following logic (example provided below with YouTube). Select the unique fragment (ED96RtfF22E) from the source HTML code of ...

phphtmlregexreplace

Issue: encountered a write EPIPE error while attempting to transfer a file to FTP via gulp

Whenever I try to deploy some stylesheets to a server using FTP, I encounter an error about 80% of the time. Here's the specific error message: Error: write EPIPE at _errnoException (util.js:1022:11) at WriteWrap.afterWrite [as oncomplete] (net.j ...

javascriptnode.jsftpgulpvinyl-ftp

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

javascripthtmlcsstypescript

How can I trigger an audio element to play using onKeyPress and onClick in ReactJS?

While attempting to construct the Drum Machine project for freeCodeCamp, I encountered a perplexing issue involving the audio element. Despite my code being error-free, the audio fails to play when I click on the div with the class "drum-pad." Even though ...

javascriptreactjshtml5-audio

Get an MP4 on your iPhone (iOS) by downloading it from a link on a webpage

Despite trying various methods such as the HTML5 download tag, JavaScript, JQuery, and other techniques, I have not been able to successfully download a file to the Album. While photos can be saved by long clicking and selecting "Save Image", videos do n ...

javascriptjqueryiosiphonemp4

JQuery click event does not play nicely with Javascript array splice functionality

When using for loops, I noticed that array.splice doesn't seem to be working as expected. The array remains unchanged. I tried moving things around and found that it still doesn't work in Chrome. var menu =['#men','#wmen',&a ...

javascriptjqueryarrays

The Socket.io authorization feature is failing to refresh session information

I am currently working on implementing Socket.IO's authorization function to retrieve session data. However, I have encountered an issue where even after logging out and destroying the session, Socket.IO retains the old session information, which is l ...

javascriptnode.jsexpresssocket.io

Guidelines for integrating deep links into a ReactJS Ionic Android application

I have recently converted my ReactJS project into an android project following a tutorial. Now, I have successfully created an APK file and would like to configure the app to open when a specific URL is clicked on a mobile browser. Any guidance on how to a ...

javascriptandroidreactjsionic-frameworknpm

What modifications can be made to the code in order to show the upload progress for each individual file when uploading multiple files simultaneously?

I am currently working on an uploader that can handle multiple file uploads and displays the progress of each uploaded file. However, I am facing some difficulties in showing the progress of every individual file. Can anyone provide me with assistance? &l ...

javascriptjquery

Position an HTML canvas at the very top of the webpage

Can someone help me figure out how to align a canvas element to the very top (0, 0) of a webpage? I attempted using margin: 0; padding: 0px;, but it didn't work. There always seems to be some white space at the top that I can't eliminate. ...

javascripthtmlcsslayout

Removal based on specific conditions upon losing focus

Here is the HTML code snippet that I am working with: <input type="text" id="myText"> <div id="myDiv"> I want to achieve a specific functionality where, when the user focuses out of the text field, #myDiv should be removed only if the user ha ...

jquery

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

I was facing problems with flashing on the Safari/Firefox browsers. By setting the main container height to max-height: 100vh, I managed to resolve the flickering issue. However, I am also looking for a solution to keep track of the window.scrollY positi ...

cssreactjsfirefoxsafariflicker

Displaying NodeJS error messages directly in the main HTML file

After creating a form using NodeJs and implementing input validations that display errors when users enter incorrect values, I encountered an issue where the errors appear on a new blank page instead of within the main HTML file itself with stylish formatt ...

javascripthtmlnode.js

Merge three asynchronous tasks into a single observable stream

I have 3 different observables that I am using to filter the HTML content. Here is the TypeScript code snippet: fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear); isLoading$ = this.store$.select(this.tableStoreService.tableSelector ...

javascriptangulartypescriptngrx

Outdated jQuery script no longer functioning (Wordpress)

I recently updated a WordPress site to Version 5.7.2 and now two of the custom Metaboxes are not functioning as expected. The issue seems to be related to the outdated jQuery version used by the Metaboxes. To address this problem, I installed a Plugin cal ...

javascriptjquerywordpress

The height of each Bootstrap column is equal to the height of its corresponding

I am trying to prevent the column height from being equal to the row height in Bootstrap. Here is my code snippet: <div class="row justify-content-center text-center"> <div class="col-sm-3"></div> <div class="col-sm-9"></d ...

htmlcsstwitter-bootstrap

The AJAX response shows a value of "undefined"

My HTML page contains these codes, which display a list of employees from the database. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="Scripts/jquery-1.10.2.js"></script> ...

javascriptjqueryajax

Wrap the json response in HTML elements

I'm currently learning about AJAX, and I've encountered a major issue that I can't seem to resolve. I pass several variables to PHP, perform various checks there, and then return string values to AJAX. Strangely, I am able to display these r ...

javascriptphpjqueryhtmlajax

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

Upon clicking, the reset function will be triggered

I have a jQuery code that includes a click event on td elements. After clicking on a td, an input field with text appears and the focus is set at the end of the text. However, I want to remove the focus after the initial click so that I can click in the ...

javascriptjquery