Tips for aligning text vertically in flexbox arrangements

As I work on building my portfolio, I have implemented links as buttons using flexbox to make responsiveness easier. The height of these flexboxes is set dynamically using JavaScript with percentages.

Despite trying various suggestions, none of them provided the exact solution I was looking for. Some of the methods I experimented with include:

justify-content:center
align-self:center
vertical-align:center

Currently, I am working on Ubuntu 19.04, using Atom as my text editor, and PHP version 7.2.17.

To view the code, visit: https://codepen.io/fTc_CZ/pen/joGYJr

My expectation was for the text to align in the center of the square rather than at the top.

javascripthtmlcssflexbox

Answer №1

Ensure the line-height matches the height within the specified class. Here is an example taken from your code:

'height': cw + 'px',
'line-height': cw + 'px' // Keep in sync with height

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

Flask not serving Favicon and images to a React application

I am currently working with a Flask server and have it set up in the following manner: app = Flask(__name__, static_folder="dist/assets", static_url_path='/assets', template_folder="dist") ...

javascriptpythonhtmlreactjsflask

Manually initializing Angular bootstrap with async in the Angular script tag

I am encountering an issue when trying to asynchronously download the Angular script in my application and manually bootstrap the application upon loading. The error message states: Failed to instantiate module wt due to: Error: [$injector:modulerr] htt ...

javascriptangularjshtml5-async

How can we add up the sum with just one click and then display the

Is there a way to calculate numbers within specific DIV boxes and display the total in a separate DIV when a box is clicked? I've attempted different methods, including enclosing the code within the window.onclick function. Check out my code on this J ...

javascripthtmljquery

The utilization of media within the meta in Next.js is not allowed

Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...

htmlnext.jsmeta-tags

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

javascriptcssonmouseovergetelementsbyclassname

Enhancing user experience: Implementing specific actions when reconnecting with Socket.io after a disconnection

I am working on a game using node.js and socket.io. The code I have written is quite simple. The game starts animating as soon as it connects to the server and continues to do so. My main concern is ensuring that the game handles network and server disco ...

javascriptnode.jsanimationsocket.io

Making changes to a variable or option through the props in a different file

In the index.js file, I have implemented getStaticProps() to fetch data from an exported function. This function requires 2 parameters, one for the type of listing and the quantity. export async function getStaticProps() { const type = 0 const data = a ...

javascriptreactjsnext.js

A step-by-step guide to activating multi-selection in the Primary SideBar of Visual Studio Code using your custom extension

Currently, I'm in the process of developing an extension for Visual Studio Code where I've added a new activityBar containing treeViews that showcase information pulled from a JSON file. My goal is to enable users to multi-select certain displaye ...

javascripttypescriptvisual-studio-codevscode-extensions

Clicking the checkbox does not synchronize with the table row

Is there a way to activate the button when the user selects the checkbox directly? Currently, the button only becomes enabled when the user clicks on a table row that is clickable. var btn = $("#btn"); btn.attr("disabled","disabled"); $("#table tbo ...

javascriptjquerycheckbox

Sending PHP variable to xmlhttp.responseText

I haven't come across this specific situation before, so I thought I would ask for help. My JavaScript code is using AJAX to call a PHP file, run the script in it, and then return a concatenated PHP variable via xmlhttp.responseText to alert that resp ...

phpjavascriptajaxxmlhttprequest

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Currently, I am developing a single-page application that fetches data from the Star Wars API. In the character section of the project, the goal is to display characters per page with the ability to navigate to the next or previous pages by clicking on but ...

javascriptreactjsstate

Obtain the Zero-width non-joiner character (‌) using the innerHTML attribute

I am attempting to retrieve a ‌ using the innerHTML method The desired output should be This section contains a zero-width‌‌non-joiner, a non-breaking space & an ampersand However, the current output is: This part c ...

javascript

React: Submit button not triggering form submission despite having a valid submit event handler and correct syntax

My question stands out from existing ones as it features valid syntax, correct use of type="submit" on the button, and a simple onSubmit handler on the form. Despite this, clicking the button fails to trigger the onSubmit handler. To illustrate ...

javascripthtmlreactjsforms

Using JavaScript, reload the page once the data has been retrieved from an Excel spreadsheet

I'm facing an issue with my JavaScript code. Here's what I have: a = Excel.Workbooks.open("C:/work/ind12.xls").ActiveSheet.Cells.find("value"); if(a == null) document.getElementById('dateV ...

javascript

Timeout reached during Protractor testing on an Angular webpage

I have developed a basic Angular portal page. The main feature is a search bar where users can enter the name of an NBA team like "Chicago Bulls", "Indiana Pacers", etc. Upon submitting the team name, users are directed to a second page where they can view ...

javascriptangularjsselenium-webdriverprotractor

Adjusting the viewer.js script

In order to view my pdf files using Mozilla's pdfjs plugin, I currently pass a query parameter to viewer.html like this: http://localhost/MyProject/viewer.html/?file=file.pdf Although this method works fine for me, I have a unique requirement for my ...

javascriptmozillapdf.js

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

Generating binary payload with Node-RED

Recently started with node-red and javascript. I am looking to establish a connection with a relay controller for status using the TCP input. I have configured a function node to create a two-byte request which will be sent through the TCP input node to th ...

javascriptnode.jsnode-red

Validating dropdown lists with Jquery

Custom Dropdownlist: <div class="col-md-2"> <div class="form-group"> <label for="field-3" class="control-label">Priority</label> <select id="lstpriority" class="custom-selectpicker" data-live-search="true" da ...

javascriptc#jqueryasp.netjquery-validate

adjust the fixed div's width to match the percentage-defined width of its parent element

My goal is to make a div with the position: fixed property have the same width as its parent element, which is a td. However, I am having trouble achieving this. Here is my current code: HTML: <table style="width: 90%; border: 1px solid black;"> & ...

htmlcsswidthcss-positionsticky