What's the best way to align three images in a row?

I am having trouble centering three social media icons next to each other. I can't seem to figure out the proper way to do it.

https://i.stack.imgur.com/Zf5p9.png

<div class="maintext flipInX animated">

   <div class="socials wow bounce animated" data-wow-delay="1s">
     <a href="www.facebook.com">  <img src="http://s33.postimg.org/yitnj0vbz/fblogo.png"/></a>
     <a href="www.github.com"> <img src="http://s33.postimg.org/r7peysh3z/github.png"/></a>
     <a href="www.linkedin.com"> <img src="http://s33.postimg.org/lq7vvi8wv/linkedin_3_32.png"/></a>
   </div>

</div>
javascripthtmlcss

Answer №1

Center align your content with the following code: text-align: center

.socials {
  text-align: center;
}
<div class="maintext flipInX animated">

   <div class="socials wow bounce animated" data-wow-delay="1s>
     <a href="www.facebook.com">  <img src="http://placehold.it/50"/></a>
     <a href="www.github.com"> <img src="http://placehold.it/45"/></a>
     <a href="www.linkedin.com"> <img src="http://placehold.it/50"/></a>
   </div>

</div>

Answer №2

Take a look at this code snippet

To center the <a> element inside the .socials div and give it properties similar to text, set it as an inline-block element. Then, add text-align:center to the parent element, which is the .socials div.

Use the CSS below to achieve centering:

.socials{
    text-align:center;
}
.socials a{
    display:inline-block;
}

UPDATE

In response to @LGSon's comment,

An inline element does not need to be styled as inline-block to center itself when the parent has text-align: center

Simply apply the following CSS to center it:

.socials{
        text-align:center;
}

Remember, if you want to center any block-level element using the method mentioned above, you must first set its display property to inline-block.

Answer №3

Utilizing Flexbox allows for easy alignment of elements both horizontally and vertically:

img { height:40px; width:40px; background-color:gray }

.social-media-icons { 
  display: flex;
  justify-content:center;
}
.social-media-icons img {
  flex: 1 auto;
}
<div class="content animateInLeft">

   <div class="social-media-icons wow bounce animated" data-wow-delay="1s">
     <a href="www.instagram.com">  <img /></a>
     <a href="www.twitter.com"> <img /></a>
     <a href="www.pinterest.com"> <img /></a>
   </div>

</div>

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

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

Having difficulty converting a local variable into a global variable in JavaScript and Express

I am facing challenges trying to convert a local variable into a global variable while working with Express and Javascript. Below is my JavaScript code snippet: // Setting up Express and EJS const express = require("express"); const JSON = requi ...

javascriptexpress

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

I have been working on positioning certain elements in the app and I have found a method that seems to work, using code like this: <v-toolbar fixed></v-toolbar> Another option is something along these lines: <v-toolbar app></v-toolb ...

javascriptvue.jspositionfixedvuetify.js

Chromium CSS blend mode problem

Can anyone help me create a Photoshop overlay effect on my website? My code works perfectly in Firefox, but it's not functioning correctly in Chrome. Here's the demo. This is my current code: HTML <img src="http://lorempixel.com/output/fash ...

htmlcssgoogle-chrome

What purpose does this particular express variable serve?

I am currently diving into the world of JavaScript, with a basic programming background to boot. However, I have always stumbled when it comes to grasping OOPs concepts. For instance, we start by importing what I believe is the express module through &apo ...

javascriptnode.jsexpressoop

The path('/') in $rootScope is not functioning properly

Below is a function called register() that I am working with. <form class="form-auth" ng-submit="register()"> This is how I have defined the register function: $scope.register = function(){ $http.post('/auth/signup', $scope.user).success ...

javascriptangularjsmean

Performing MongoDB aggregation to tally the number of documents in a query for every array field

Here's an example through JS code of what I'm trying to achieve: let waiting = findSessions() // regular query for status "WAITING" let results = []; for (let w of waiting) { // Only push it to results if the w.members[0] and TARGET_USER_ID h ...

javascriptnode.jsmongodbaggregation-framework

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

javascripthtmld3.jsappend

How can I make the menu appear only on a certain page in a React application, instead of showing on every page?

Currently, I am in the process of learning React and developing an admin panel. My main challenge is to display the menu only on specific inner pages such as dashboard, list, or add, rather than displaying it on every page including the login page. Is the ...

htmlreactjsreact-router

A guide on accessing JavaScript files from the components directory in a React Native iOS application

I am encountering difficulty in accessing the components folder within my React Native Project on IOS. The error message I am receiving is: Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find ...

javascriptiosnode.jsreact-native

Utilize a jQuery button to horizontally align text with ellipsis

I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id=&apo ...

jqueryhtmlcssjquery-uivertical-alignment

Regular expressions - For alphanumeric or numeric with a possible slash character included

I need assistance with extracting alphanumeric values from a string array using RegEx. For instance: Apartment 101/B First Villa 3324/A Second Milk 12MG/ML Third Sodium 0.00205MG/ML Fourth Water 0.00205MG Fifth Eggs 100 Sixth My goal is to retrieve the v ...

javascriptregex

Having trouble accessing the templateUrl for HTML in Angular version 1.6

I am currently working on a basic Angular 1.6 web application. Although I have created a state for the URL "/", it seems that Angular is unable to locate the file for some reason. The folder structure looks like this: https://i.stack.imgur.com/2p6bP.png ...

htmlangularjsstate

What is the most effective way to extract data from HTML that contains mathematical notations and convert it into plain text format?

Using BeautifulSoup to extract text from HTML can be a bit tricky, especially when dealing with math tags. Below is the HTML code snippet that uses math tags to display text: <p> <span class="aps-inline-formula"> <math display="inline" x ...

pythonhtmlpython-3.xseleniumbeautifulsoup

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

cssrshiny

What is the sequence of the middlewares for error handling and handling of 404 errors?

The express.js website has confused me with contradictory statements regarding error-handling middleware. According to one page, you should define error-handling middleware last, after other app.use() and routes calls. However, another page states that you ...

javascriptnode.jsexpressmiddleware

Avoiding HTML in JavaScript: Tips and Tricks

My application generates numerous elements dynamically based on server data in JSON format. This process involves embedding a significant amount of HTML directly within my JavaScript code, leading to pollution and making it increasingly challenging and l ...

javascriptjqueryhtmlajax

Using a loop to chain jQuery's .when().then() method and ensuring a fixed final call at the end of the

The solution that closely matches my issue can be found at One common use case for .then is chaining ajax requests: $.ajax({...}).then(function(){ return $.ajax({...}); }).then(function(){ return $.ajax({...}); }).then(function(){ retu ...

javascriptjqueryajax

Troubleshooting issue: Dexie.js query using .equals not functioning properly in conjunction with localStorage

I am attempting to retrieve a value from indexedDB using Dexie.js, but it seems that the value stored in localStorage is not being recognized. I have tried various methods including async/await, promises, placing the localStorage call in created, mounted, ...

javascriptvue.jslocal-storageindexeddbdexie

Preserving reference equality while passing props in React

Consider a scenario where a function dynamically generates some props for a component, and you want to pass all of them without specifying each individual prop that the function might generate. Typically, this can be achieved using the spread operator. How ...

javascriptreactjs