An aspiring programmer, Hsin Yi has decided to learn coding the hard way by making games. She has recently taken an interest in web programming, so you may catch her slaving away at HTML, CSS and Javascript in her free time too.
vertical-align: middle work? How to vertically-centre elements in HTML and CSSIf 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:
This article is a part of the series:
Creating a Farming RPG (like Harvest Moon) in Unity
Ever wanted to create a game like Harvest Moon in Unity? Check out Part 14 of our guide here, where we go through how to set up the currency and shop system. You can also find Part 13 of our guide here, where we went through how to set up the main menu and generate obstacles.
A link to a package containing the project files up to Part 14 of this tutorial series can also be found at the end of this article, exclusive to Patreon supporters only.
This article is a part of the series:
Creating a Farming RPG (like Harvest Moon) in Unity
Ever wanted to create a game like Harvest Moon in Unity? Check out Part 13 of our guide here, where we go through how to set up the main menu and generate obstacles. You can also find Part 12 of our guide here, where we went through how to implement the player's sleep feature, as well as saving game data to both JSON and binary files.
A link to a package containing the project files up to Part 13 of this tutorial series can also be found at the end of this article, exclusive to Patreon supporters only.
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
This article is a part of the series:
Creating a Farming RPG (like Harvest Moon) in Unity
Ever wanted to create a game like Harvest Moon in Unity? Check out Part 12 of our guide here, where we go through how to implement the player's sleep feature, as well as saving game data to both JSON and binary files. You can also find Part 11 of our guide here, where we went through how to save our farmland's data.
Unlock Content