Icons for popular social media platforms displayed at the bottom of

Take a look at my HTML code:

<div class="footer-social">
    <span>Get in touch:</span>
    <li><a href="http://www.facebook.com">
        <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
    </a></li>
<li><a href="http://www.twitter.com">
    <img src='http://grfx.cstv.com/schools/wis/graphics/icon_twitter24.jpg' />
</a></li>
<li><a href="http://www.youtube.com">
    <img src='http://mylzh.net/wiki/worldofwarcraft/images/5/5d/Icon-youtube-22x22.png' />
</a></li>

Here is the CSS that I am using:

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;}
.footer-social span { margin-top: -20px;}

You can view my jsfiddle here: http://jsfiddle.net/qNTL2/

I am trying to center the text "Get in touch:" with the images, but no matter what I do, it doesn't seem to work. Can anyone offer any insights or solutions to this problem?

Any assistance would be greatly appreciated! Thank you!

htmlcss

Answer №1

To start, make sure to include <ul> and </ul> when using <li>. If you need the content centered, I have provided two demos for you below.

Do you prefer it centered like this?

.footer-social { float: right; margin-top:5px; height:30px; }
.footer-social ul {float:left; padding:0; margin:0;}
.footer-social li {float:left; list-style:none; margin-left:5px;}
.footer-social span { float:left; }

VIEW DEMO

Or perhaps more like this?

.footer-social { float: right; margin-top:5px; }
.footer-social ul { padding:0; margin:0 0 0 10px;}
.footer-social li {float:left; list-style:none; margin-left:5px;}

VIEW DEMO 2

Answer №2

Your Modified CSS

.footer-social { float: right; margin-top:5px;}
.footer-social li { display: inline;float:right;}
.footer-social span { margin-top: -20px;}

Changes Made Here

 .footer-social li { display: inline;float:right;}

See the Demo on Fiddle

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

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

I am experiencing an issue with Safari where there is an unexpected rounded border appearing that

Upon inspecting the image, a slight border is visible behind the main border on Chrome and Firefox. However, Safari and iPhone display a rounded thin border instead. Can you help us understand why this discrepancy is happening and how we can remove it? P ...

htmlcsssafari

In the IE7 standards mode, table cells with no content will have a height of 1px

When utilizing IE7 standards mode within IE9, empty table cells are automatically assigned a height of 1px. As a result, elements positioned beneath the table appear lower on the page than intended. To view an example of this issue, refer to the code provi ...

htmlcssinternet-explorerinternet-explorer-7

Implementing a vertical divider line in between columns with Foundation CSS

Here is the HTML code snippet: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/> <div class="card"> <div class="card-section"> <section class="row"&g ...

htmlcsszurb-foundation

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

javascripthtmlajaxsvg

Showing a DIV multiple times with an additional text field in HTML and JS

As someone new to development, I am facing a requirement where I need to create a form with a dynamic field that can be added or removed using buttons. When the user clicks on the Add button, another field should appear, and when they click on Remove, the ...

javascriptphphtml

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

Using JavaScript to modify the -webkit-animation-play-state

Hello, I'm currently facing a challenge in changing my css3 -webkit-animation-play-state property from paused to running upon clicking on another div. Does anyone have any suggestions on how I can achieve this? I believe JavaScript might be the way to ...

javascriptcsswebkit-animation

The incorrect CSS styling was applied to the custom input background with the attribute "text"

Is there any way to remove the white border and background that appears around a form input field with type "text"? Looking for some help on this issue! .my-form-login input[type="text"] { background-image: url('../images/text-input.png') ...

cssinputbackground-color

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

Why is the jQuery change event only firing when the page loads?

I am experiencing an issue with a .js file. The change event is only triggering when the page loads, rather than when the selection changes as expected. $(document).ready(function(){ $("#dropdown").on("change keyup", colorizeSelect()).change(); }); f ...

javascriptjqueryhtml

Begin counting when a particular div element is visible on the screen

I have a plugins.init.js file that contains a try-catch block which runs on page load. I am looking for a way to execute this code only once when the div with the class counter-value comes into view. Is there a method to achieve this? try { const count ...

javascripthtmlscrollscrollview

Expanding the Width of Bootstrap 4 Dropdown Button

Currently, I am utilizing Bootstrap 4's dropdown feature. Is there a way to modify the code below so that the dropdown menu that appears upon clicking the button matches the same width as the button itself? It's important to note that the button ...

htmlcssbootstrap-4

Issues with appending XML to forms using DOMDocument

I'm encountering an issue with the appendXML() method as it's not successfully appending forms to HTML. Here is the current code I am using: $domdocument = new DOMDocument(); $domdocument->loadHTML($html); $domlookup = new DOMXPath($domdocum ...

phphtmlformsappenddomdocument

The Bootstrap flex-grow-0 class did not work as intended in my navigation bar

My webpage has a navbar that currently looks like this Click here for an image example of the code output This is the code I have written for the navbar: <nav class="navbar navbar-expand-sm fixed-top bg-white"> <div class="container my-2" ...

htmlcssbootstrap-4

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...

htmlcsshtml-datalist

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

htmlcss

Why isn't the card positioned in the center of the screen?

Why is the card not centered on the screen as it is supposed to be? I am utilizing Bootstrap 4.5 <div class="container"> <div class="row"> <div class"col"></div> <div class="col-8"> <div class="card"> ...

htmlcssbootstrap-4