Ways to center text vertically on a page

I am struggling with aligning the contents of multiple divs like this

<div class='unit'>number1</div>
<div class='unit'>number2</div>
<div class='unit'>number3</div>

css

.unit{
  border: solid 2px yellow;
  float: left;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}

I have tried using the CSS above to vertically align my contents within each unit, but I am only able to horizontally center the text. Can anyone provide assistance on how to achieve vertical alignment?

htmlcss

Answer №1

implement this 

.element{
  border: solid 3px green;
  display:flex;
  height: 100px;
  width: 100px;
  text-align: center;   
  align-items: center;
}

See it in action- http://jsfiddle.net/abc123/

Answer №2

display:table-cell;
vertical-align:middle;

To add content inside a container, consider using a inner div and if you are comfortable with using table-cell, it can be a good option.

CHECK OUT THE DEMO HERE

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 display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

javascripthtmlangulardatetypescript

Displaying a DIV on initial website load using localStorage

I'm currently facing some issues while trying to achieve a specific functionality. My goal is to display a DIV only the first time a website is loaded. While I'm aware that this can be done using PHP and Cookies, I prefer utilizing the localStora ...

jqueryhtmlcookieslocal-storage

Using Google scripts for sending POST requests with HTMLRequest

I am attempting to authenticate my account for DirectEnergie using Google App Script. When I make the request on POSTMAN with Chrome, it works perfectly fine. However, when I try to run the same script as shown below, it simply returns the HTML of the firs ...

javascripthtmlgoogle-apps-script

Switch between Accordions/Tabs with JavaScript (ES6)

Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...

javascriptcssdomecmascript-6accordion

Tips on positioning items with a ChartBar using Chart.js alongside Alerts from Bootstrap 4

Greetings! I am facing a challenge with arranging a bar chart using Chart.js alongside bootstrap 4 alerts. The issue arises in the alignment of elements as depicted in this image: https://i.sstatic.net/4kDSo.png My goal is to position the alerts, located ...

c#htmlbootstrap-4chart.js

Instantly see changes without having to manually refresh the screen

I need help figuring out how to update my PHP webpage or table automatically in real-time without requiring a manual refresh. The current functionality of the page is working perfectly fine. Specifically, I want the page to instantly display any new user ...

javascriptphphtmlajax

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...

htmlcssangularstyles

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

Guide to retrieving IDs of images on a canvas during drag and drop functionality

I've developed a finite state machine drawing tool that includes drag-and-drop functionality for different images, such as states and arrows. Each arrow creates a div tag for the transition, with unique ids assigned to every state, arrow, and transiti ...

javascriptphpjqueryhtmlcakephp

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

cssangularangular-material

Having trouble with the basic function of jQuery radio buttons, unable to make them work properly

Struggling with my first attempt at incorporating jQuery into my project. I have set up 2 radio buttons on a form, and I want the selected option to update the value of an input text box within the same form. However, despite my best efforts, I just can&ap ...

jqueryhtmlradio-button

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

Steps for removing a recently added list item with a child button included

I'm currently working on developing a multi-section user-generated list application similar to this example. The goal is to allow users to input text into a field and then, based on the button they click, determine which section of the list their new ...

jqueryhtml

Is there a way to tally the checked mat-radio-buttons in Angular?

I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...

javascripthtmlangular

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...

phphtmlcurlfile-get-contents

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

phphtmlmysql

Quiz Canvas: An interactive HTML game for testing your knowledge

Hello, I am currently working on developing an HTML quiz game using canvas. However, as a beginner in this field, I have struggled to find relevant documentation specifically for this project. Overview of the Game The game consists of 5 scenes, each repr ...

htmlcanvasbootstrap-4online-game

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

Ways to adjust flex division to occupy the entire height of its container

https://i.sstatic.net/4YInI.png https://i.sstatic.net/hu8mG.png https://i.sstatic.net/Q51ha.png I am looking to activate an onClick event on the body where discussions and icons are located. While triggering onClick on the body itself poses no issue, I a ...

htmlcssbootstrap-4onclickbootstrap-5