The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated!

Check out the fiddle here for reference.

<footer>
  <ul>
    <li><a href="https://www.facebook.com" target="_blank" title="Like us @ Facebook.com"><div class="footer_icon facebook"></div><div class="iconText">Facebook.com</div></a></li>
    <li><a class="inst" href="http://instagram.com" target="_blank" title="Follow on Instagram"><div class="footer_icon instagram"></div><div class="iconText">We're on Instagram</div></a></li>
    <li><a class="twt" href="https://twitter.com" target="_blank" title="Follow us @ Twitter.com"><div class="footer_icon twitter"></div><div class="iconText">Twitter.com</div></a></li>
    <li class="right"><a class="pin" href="http://www.pinterest.com" target="_blank" title="Visit Pinterest.com"><div class="footer_icon pinterest"></div><div class="iconText">Pinterest.com</div></a></li>
  </ul>
</footer>
css

Answer №1

This solution appears to be effective:

.footer_icon {
    height: 40px;
    width: 40px;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
    display:inline-block;
    vertical-align: middle;
}

Simply include vertical-align: middle in your CSS declaration for .footer-icon.

For a demonstration, visit: http://jsfiddle.net/audetwebdesign/g3Jk6/

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

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

javascriptjqueryhtmlcsshyphenator

The divs with the specified class are not applying the desired styles to my document. However, the input and labels are functioning correctly. What could I be overlooking?

Web Development : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> The Coding Academy Survey</title> <link rel="stylesheet" href="styles.css" ...

htmlcss

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

Challenges of aligning a modal overlay in the middle of mobile screens

Currently, I am developing a website and encountering a specific issue with the modal structure. When viewing it on Codepen using Chrome devtools and toggling the device toolbar to simulate mobile screens, everything appears fine. However, when opening the ...

javascripthtmlcssmodal-dialog

The properties of margin:auto and text-align:center are failing to function as expected

I'm facing an issue while creating a website. The 'margin: auto' and 'text-align: center' properties in my CSS code seem to not be functioning as expected. Can someone please review my code in inspect element and identify the probl ...

htmlcssmargintext-align

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

htmlangularcss

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

jqueryhtmlcss

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

cssvisual-studio-codecolors

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...

cssjekyllblogsrouge

Issue with alignment on the printed version of an HTML document

While attempting to print an auto-generated HTML page through my Thermal POS printer, I encountered a large left margin issue. The application is developed using PyQt5, and I had to resort to a python script to generate the HTML code. Unfortunately, in the ...

htmlcssprintingpyqt5

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows

Pictures in Windows 7 have shifted to the left

After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...

asp.nethtmlcss

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

htmlimagecss

Ways to Create a Text Overlay on an Image for your Banner

I have a banner div element with an image overlapping it. I'm trying to display my text without it being covered by the image, but I'm facing some challenges. Here's a visual example of the issue: https://i.stack.imgur.com/JdW75.png This ...

htmlcssbootstrap-4

Align Bootstrap list items vertically

I'm facing a challenge with aligning the yellow list item blocks vertically in my design. The issue arises because the black dog item is not aligning properly due to its image being shorter than the other two blocks. I've been struggling to find ...

htmlcss

Is your jQuery TextEditor not functioning properly?

Having some trouble integrating the jQuery TextEditor plugin into my CodeIgniter project. I'm puzzled as to why it's not functioning properly. Just a heads up, my project also utilizes Bootstrap. Can anyone shed some light on why the plugin is fa ...

jquerycsscodeignitertwitter-bootstrap

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

phpcsstwitter-bootstrapjoomlaaffix

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width. I found this CSS solution for the first ...

htmlcsscss-tables

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson