Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet:

<div class="row">
    <div class="col-md-10 social-icons">
        <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a>
        <a href="https://github.com/" target="_blank"><img src="/images/github-i.png"></a>
        <a href="https://twitter.com/" target="_blank"><img src="/images/twitter-i.png"></a>
        <a href="https://www.facebook.com/" target="_blank"><img src="/images/facebook-i.png"></a>
        <a href="https://t.me/" target="_blank"><img src="/images/telegram-i.png"></a>
        <a href="https://medium.com/" target="_blank"><img src="/images/m-icn.png"></a>
    </div>
</div>

I want to align all the social icons evenly but using "text-justify" class doesn't seem to work. Even though applying "text-center" class on the "social-icons" div centers the icons, I need them justified.

Here's the CSS in use:

.social-icons img{
    margin-right: 7px;
}
.social-icons{
    margin-bottom: 14px;
}
.social-icons a{
    display:block;
    width: 16.66%;
    float:left;
    text-align:center;
}
.social-icons img:last-child{
    margin-right: 0px;
}
.notify-section .social-icons img{
    width: 40px;
}

If anyone can provide guidance on achieving the desired alignment, it would be greatly appreciated. Here's a screenshot for reference.

htmlcss

Answer №1

To achieve justified text alignment, apply the following CSS: text-align-last: justify;

.justify-links{
  text-align-last: justify;
}
<div class="justify-links">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Answer №2

To achieve equal spacing with flex, simply use justify-content: space-between;. Take a look at this code snippet for reference:

.justify-links{
  display: flex;
  justify-content: space-between;
}
<div class="justify-links">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</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

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...

twitter-bootstrapcssbootstrap-4font-awesome

No adjustment in color upon switching themes

I've been struggling to achieve the desired outcome while working on a small coding task. The goal is to modify the color of the screen background, text, and button as illustrated in the uploaded image. I have three code files for this task - index, t ...

cssreactjs

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

cssangularangular-material

Fire the click event following the parsing of the HTML page

Is it possible to programmatically navigate to a URL, retrieve the response, and then activate the JavaScript click event of an HTML element within that response? For example, if the response contains an element like this: <div id="test">Click me< ...

javascriptjqueryhtmleventsdom

I am in the process of troubleshooting why the header does not redirect correctly when clicked

As I work on developing a user authentication script for my database, I encounter an issue when trying to match the information in my MySQL database upon clicking a button. For some reason, nothing seems to happen regardless of whether the login informatio ...

phphtmljqueryajax

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

javascriptjqueryhtmlcssmousemove

The toLowerCase method seems to be malfunctioning along with several other functions

JS var score = 0 var yes = "yes" var pokemonName = []; var bg = []; var index = 0; document.getElementById('repete').style.visibility = 'hidden'; (function asyncLoop() { background = bg[num = Math.floor(Math.random() ...

javascripthtml

JavaScript: create a button that dynamically changes size and color when scrolling

I have a pulsing button (#scrollarrow) at the bottom of my website that disappears as I start scrolling. The jQuery code responsible for this effect is as follows: $(document).ready(function(){ $(window).scroll(function(){ if ($(thi ...

javascriptjqueryhtmlcss

Zero results returned for the angularjs script

I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...

javascripthtmljsonangularjs

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...

jqueryhtmlcss

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

htmlcssbackground

Why does the for loop function correctly with console.log but not with innerHTML?

Hello! I'm completely new to JavaScript, so please excuse any oversight... Below is the code that runs when a button on the page is clicked: function getNumbers() { var firstValue = document.getElementById("time_one").value; var ...

javascripthtmlfor-loopinnerhtmlconsole.log

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

Integrating variable interpolation within media queries using Compass/Sass

Is there a method to achieve the desired result in Compass/Sass? $padding: 3em div { padding: $padding; } @media screen and (max-width: 780px) { $padding: 2em; } /* Result: div { padding: 3em; } @media screen and (max-width: 780px) { ...

csscompass-sasssass