What is the best way to align a group of social media icon background images in the center

Looking for assistance with centering a block of social icons on my website when viewed on a mobile browser. Here is the HTML:

<div id="header-tel-no">Tel: 123456789</div>

<div id="social-buttons-header">
<p><a class="social-button sb-linkedin" href="http://www.linkedin.com/sample" target="_blank">Linkedin</a></p>

<p><a class="social-button sb-twitter" href="https://twitter.com/sample" target="_blank">Twitter</a></p>

<p><a class="social-button sb-facebook" href="https://www.facebook.com/sample" target="_blank">Facebook</a></p>

<p><a class="social-button sb-email" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51383f373e1122303c213d347f323e7f243a">[email protected]</a>">Email</a></p>
</div>

The CSS being used is as follows:

#social-buttons-header{

    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}

.social-button{

    width: 30px;
    height: 30px;
    text-indent: -999em;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 2px;
    text-decoration: none;
    border: 1px solid #FFFFFF;
}

a.social-button:hover,
.social-button a:hover,
a.social-button:hover:after,
.social-button a:hover:after {

    text-decoration: none;
    border: 1px solid #FF9933;
}


a.social-button.sb-facebook,
.social-button a.sb-facebook {
  background: transparent url(images/facebook.png) no-repeat;

}

a.social-button.sb-twitter,
.social-button a.sb-twitter {
  background: transparent url(images/twitter.png) no-repeat;

}

a.social-button.sb-linkedin,
.social-button a.sb-linkedin {
  background: transparent url(images/linkedin.png) no-repeat;

}

a.social-button.sb-email,
.social-button a.sb-email {
  background: transparent url(images/outlook.png) no-repeat;

}

The issue lies in the alignment of the social icons:

.................[x][x][x][x]

I would like them to be displayed as such:

........[x][x][x][x] .........

If anyone has suggestions on how to achieve this, it would be greatly appreciated. Thank you.

htmlcsscentering

Answer №1

To modify the code provided - Change p elements to have inline-block display and center the header content

http://jsfiddle.net/vc3tkdq7/

p {
    display: inline-block;
}

#social-buttons-header{
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;    
}

To eliminate the text

http://jsfiddle.net/xten2c47/1/

I applied text-indent: 999999px;

Answer №2

Review the code snippet provided below: 

#social-buttons-header {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}
.social-button {
  width: 30px;
  height: 30px;
  text-indent: -999em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 2px;
  text-decoration: none;
  border: 1px solid #FFFFFF;
}
a.social-button:hover,
.social-button a:hover,
a.social-button:hover:after,
.social-button a:hover:after {
  text-decoration: none;
  border: 1px solid #FF9933;
}
a.social-button.sb-facebook,
.social-button a.sb-facebook {
  background: transparent url(images/facebook.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-twitter,
.social-button a.sb-twitter {
  background: transparent url(images/twitter.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-linkedin,
.social-button a.sb-linkedin {
  background: transparent url(images/linkedin.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-email,
.social-button a.sb-email {
  background: transparent url(images/outlook.png) no-repeat;
  border: 1px solid black;
}

<div id="header-tel-no">Tel: 123456789</div>
<div id="social-buttons-header">
  <p><a class="social-button sb-linkedin" href="http://www.linkedin.com/sample" target="_blank">Linkedin</a><a class="social-button sb-twitter" href="https://twitter.com/sample" target="_blank">Twitter</a><a class="social-button sb-facebook" href="https://www.facebook.com/sample"
    target="_blank">Facebook</a><a class="social-button sb-email" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fafdf5fcd3e0f2fee3fff6bdf0fcbde6f8">[email protected]</a>">Email</a>
  </p>
</div>

.

Fiddle Demo

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

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. https://i.sstatic.net/pGxzt.png I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: { ...

pythonhtmlcssselenium

Trigger the function in ng-change each time the same option is clicked repeatedly

Here is the code I am working with: angular.module("myApp", []).controller("myController", function($scope) { $scope.currentOption; $scope.showWindow = false; $scope.myOptions = [{ id: 1, name: 'This opens the window' }, { ...

htmlangularjsselect

Ways to automatically display the Nebular Accordion using NgFor

Struggling with the latest Nebular version in Angular 7, I'm encountering a problem when using the nebular accordion component. Problem: The default behavior should have only one accordion expanded at a time, but setting expanded = true expands all of ...

angularhtmlangular7nebular

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

Embed the CSS from the iframe

** This question is purely hypothetical ** Imagine I have a website with the following code: <head> <style> body { background-color: red; } </style> </head <body> <p>blah</p> </body> If I were to embed th ...

htmlcssiframe

How come the styles in my CSS file aren't being applied to my images based on their class or ID?

When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine. <--JavaScript- ...

javascripthtmlcssreactjs

Displaying an HTML file in a Node and Express application using JavaScript File handling

Starting my first Node, Express & Angular project has been a bit tricky due to issues with the asset pipeline. I'm not entirely sure if it's related to my folder structure, which I tried setting up based on online tutorials but am open to suggest ...

javascripthtmlangularjsnode.jsexpress

The PurgeCSS CLI does not generate CSS files beyond the command line interface

I'm struggling to successfully extract my CSS using purgecss from the command line and save it to a separate file. The instructions on PurgeCSS.com are vague: By default, the CLI only outputs the result in the console. To save the purified CSS files ...

cssnpmcommand-linecss-purge

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

cssjsfdatatable

dynamic text overlay on a bootstrap carousel

Having limited knowledge in html and css, I am using a bootstrap carousel slider with text. I am trying to change the color of the box randomly. https://i.sstatic.net/TozUP.jpg Here is the code that I am currently using: <ol class="carousel-indicato ...

javascripthtmlcsstwitter-bootstrap

Every time I reload the page, a new row is added to the database

When I attempt to refresh the page, a new row appears each time. Trying to troubleshoot this issue has been challenging for me as I am still relatively new to database programming. The source of the repeated value is unclear to me, as it continues to show ...

phphtmlmysqlrowrepeat

Python regular expressions: eliminate specific HTML elements and their inner content

If I have a section of text that includes the following: <p><span class=love><p>miracle</p>...</span></p><br>love</br> And I need to eliminate the part: <span class=love><p>miracle</p>.. ...

pythonhtmlregextags

use jquery to increase margin on card upon collapse displaying

I'm currently using an accordion from a bootstrap 4 website. <div class="accordion" id="accordionExample"> <div class="card m-0"> <div class="card-header bg-white" id="headingOne"> <h5 class="mb-0"> <but ...

jquerycssbootstrap-4accordion

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

javascriptjqueryhtml

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascriptjqueryhtmldom

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

cssrc3.js

make sure the <option> tags fit seamlessly inside a Bootstrap card

I'm currently working on a project using Angular in combination with Bootstrap 4.0. My goal is to integrate <select>, <option>, and <optgroup> elements within a card. Below is the code snippet from the component.html file: <div ...

htmlbootstrap-4html-select

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

Bootstrap dropdown menu experiencing functionality issues

I am facing an issue with implementing the javascript bootstrap file in my project. The dropdown menu is not working as expected even though I have saved bootstrap to my project folder. I have tried looking at other example codes and even copied and paste ...

javascripthtmltwitter-bootstrap-3