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

Step-by-step guide on how to activate a colorbox using a targeted Id or class

Below is the code I'm currently working with: <div class="hidden"> <div id="deletePopContent" class="c-popup"> <h2 class="c-popup-header">Delete Practice Sheet</h2> <div class="c-content"> <h3 ...

javascriptajaxjsonjquerycolorbox

Whenever I find myself being redirected to the login page, my goal is to eliminate the bottomTab from view

I'm looking to eliminate the bottom tab when I land on the login page, even though I've set it up for all pages. However, whenever I click on the login button, the tab remains visible. Here is my current code: import React, { useContext } from & ...

javascriptreactjsreact-native

Entering a new row and sending information through ajax

I'm looking for some help with a web page I have that includes a particular table structure: **Check out my Table*:* <table id="staff" class="table"> <thead> <tr> <th>First Name</th> <th>Last Nam ...

javascriptphpjquerymysqlajax

`how to insert finished HTML & CSS header into WordPress PHP documents`

After dedicating countless hours to studying, I still can't figure out how Wordpress will locate and utilize my alternate header. The code snippet below served as a helpful starting point: <!--?php /* */ if(is_page(23)) { get_header('about&a ...

phphtmlcsswordpress

Bootstrap3 and jQuery are attempting to achieve vertical alignment

I am trying to vertically align Bootstrap col-md* columns. I have two blocks, one with text and one with an image, and I want them to be equal in height with the text block vertically centered. My current solution is not working correctly. Can someone plea ...

jqueryhtmlcsstwitter-bootstrap

When trying to run a jQuery function on click or load events, an error message stating that

When I have an .on(click) event triggering an ajax call, I want the same actions to occur when the page loads as well. My idea is to create a function that contains everything within the .on(click) event and trigger this function on page load. Although I ...

javascriptjqueryajax

Filtering data with React's multiselect checkboxes

I have created an amazing app that fetches a list of todos from this incredible source To enhance user experience, I developed a special CheckBoxDropDown component for selecting todo IDs Within the CheckBoxDropDown.js component, I am passing the onChange ...

javascriptreactjsreact-hooksmaterial-uicodesandbox

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

csshtml

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Updating a nested property within an array of objects in MongoDB

Storing grades for an online education application using MongoDB. Here is a sample classRoom document stored in my mongoDB database. StudentGradeObjs are kept in an array within a GradeObject. GradeObjs are stored in an array of GradeObjects inside a class ...

javascriptarraysnode.jsmongodb

Issue with content overlapping when hamburger icon is tapped on mobile device

When the hamburger menu is pressed on smaller screens, I want my navbar to cover the entire screen. To achieve this, I included the .push class in my code (see the jQuery and CSS) to trigger when the .navbar-toggle-icon is pushed. However, after implemen ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting the failure of the fetch function in my React application

Currently, I am delving into full-stack development with a focus on Js, React, and Express coupled with a Postgres database. The server is configured to run on localhost:5003, and the backend app.js file contains the following code: const express = require ...

javascriptreactjsexpress

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

css

Execute the Angular filter again when there is a change in the scope

I am currently working on an application where Users have the ability to switch between kilometers and miles for unit distances. To handle this, I created a custom filter that converts the distances accordingly: app.filter('distance', function() ...

javascriptangularjs

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Although my current approach works, I believe there may be a more efficient way to implement this in Angular. The situation is as follows: Imagine nested, inflected paths like /logos and /logo/:id The markup below functions as intended: <li class ...

javascripthtmlangulartypescript

Creating a route-guard in a Vue.js/Firebase authentication system for secure navigation

I have created a Vue.js/Firebase authentication interface following a tutorial. The app is mostly functioning properly, but I am experiencing issues with the route guard. Upon signing in and redirecting from "http://localhost:8080/home" to "http://localh ...

javascriptfirebasevue.jsvue-router

Is it considered beneficial to use Observable as a static class member?

Lately, I have been diving into a new Angular project and noticed that the common way to share state between unrelated components is by using rxjs Subject/BehaviorSubject as static members within the class. For instance: export class AbcService { privat ...

javascriptangulartypescriptooprxjs

Adjusting the styling of a webpage in real-time

Here is the CSS code I am working with: .myTabs .JustForFun .ajax__tab_inner:hover { width: 109px; background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; background-color: #BBC614; } I want to change the background-c ...

c#javascriptjqueryasp.net

Debug errors occur when binding to computed getters in Angular 2

Currently, I am integrating Angular 2 with lodash in my project. Within my model, I have Relations and a specific getter implemented as follows: get relationsPerType() { return _(this.Relations) .groupBy(p => p.Type) .toPairs() ...

javascripttypescriptangulardecoratorlodash

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

javascripthtmlangular