Why doesn't vertical-align: middle work?

Why doesn’t vertical-align:middle work? How to vertically-centre elements in HTML and CSS

If you are new to working with CSS, you may find that the language comes with its fair share of quirks that can be frustrating, such as the text-align attribute not always working at horizontally-aligning your content. In a similar way to text-align, the vertical-align attribute doesn’t always work at aligning your content vertically. Take the following HTML code for example:

<div style="width:100%;height:140px;background:#ddd;text-align:center;vertical-align:middle;">
	<img src="http://placekitten.com/75/75"/>
</div>

Even with the vertical-align:middle style assigned to it, the image doesn’t align itself vertically! What’s going on? Here’s a quick breakdown of how to do it, with lots of examples, without having to do too much reading (great for if you’re rushing out a school assignment).

Continue reading
Fixing the e.indexOf is not a function error

Fixing the “e.indexOf is not a function” error on your website

If you have a WordPress site that was built before August 2020 (when WordPress 5.5 decided to stop supporting jQuery Migrate), or if you manage a site that recently weaned off jQuery Migrate, you might run into errors where the parts of your site that run on Javascript stop working.

When you open the Developer tools of your browser (that’s the F12 key for most browsers), you might also see an error message that looks something like this.

Uncaught TypeError: e.indexOf is not a function
    at S.fn.load (jquery.min.js?ver=3.6.0:2:84932)
    at headings.min.js?ver=3.19.4:1:2579
    at headings.min.js?ver=3.19.4:1:2706
Continue reading
XAMPP MySQL not starting on Windows

XAMPP MySQL not starting on Windows

XAMPP is a great tool for web developers who need to host websites locally on their own computers. Unfortunately, because it uses ports and services that are commonly used by other applications, conflicts can happen, causing certain applications on XAMPP to be unable to run.

In this article, we will be exploring what you can do if XAMPP’s Apache service does not run on Windows.

In a previous article, we explored how to troubleshoot situations where XAMPP MySQL does not work on macOS. You may also be looking for solutions to troubleshoot XAMPP Apache for Windows instead too.

Continue reading
A primer on vertical-align in CSS

A primer on the vertical-align attribute in CSS

Of all the CSS attributes that are available to web developes, the vertical-align attribute is perhaps the most mystifying. At first glance, the attribute seems like the vertical aligning cousin of the text-align attribute, but when you try and use it to vertically-centre your elements, it doesn’t work!

<div style="height:100px;background-color:#eee;">
	<p style="background:#dcc;">Item to be vertically-centred</p>
</div>

Item to be vertically-centred

Continue reading
XAMPP Apache not starting on macOS

XAMPP Apache not starting on macOS

XAMPP is a great tool for web developers who need to host websites locally on their own computer. Unfortunately, because it uses ports and services that are commonly used by other applications, conflicts can happen, causing certain applications on XAMPP to be unable to run.

In this article, we will we exploring what you can do if XAMPP’s Apache service does not run on a macOS platform.

We also have a guide if XAMPP Apache isn’t starting on your Windows device.

Continue reading
XAMPP MySQL not starting on macOS

XAMPP MySQL not starting on macOS

XAMPP is a great tool for web developers who need to run or test web applications locally on their own computer. Unfortunately, because it runs applications on the LAMP stack, conflicts can happen, causing certain applications on XAMPP to be unable to run.

In this article, we will be exploring what you can do if XAMPP’s MySQL service does not run on a macOS platform.

Are you looking at getting XAMPP MySQL to work on Windows instead? I’ve also wrote a guide for getting XAMPP Apache working on macOS. Do click on these aforementioned links if they are what you need instead.

Continue reading
Best practices when uploading images onto WordPress

Best practices when uploading images onto WordPress

If you’re managing a WordPress site that you’ve developed yourself, or one that has been created by a developer and handed over to you, this is a handy guide that you should read. It covers how to optimise your images, so that:

  1. Your site loads as fast as possible, and;
  2. Your images are optimised for crawling and indexing by search engines like Google
Read more