Vertically Align text

Developer
Ash Durham
Size
1,872 Kb
Views
4,048
  1. Vertically Align text Previews
  2. Vertically Align text HTML Codes
  3. Vertically Align text CSS Codes

How do I make an vertically align text?

Displays multiple ways of vertical aligning multi-line text. What is a vertically align text? How do you make a vertically align text? This script and codes were developed by Ash Durham on 05 January 2023, Thursday.

Vertically Align text Previews
IQ Test

Vertically Align text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertically Align text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="displaytable">
<div class="circle"> <div class="circle_bg"></div> <div class="content_wrap"> <div class="content">I'm centered</div> </div>
</div>
<div class="circle"> <div class="circle_bg"></div> <div class="content_wrap"> <div class="content">I'm centered too did you know?</div> </div>
</div>
<div class="circle"> <div class="circle_bg"></div> <div class="content_wrap"> <div class="content">I'm centered too did you know? How cool are we!?</div> </div>
</div>
</div>
<div class="absolutetrick"> <div class="circle"> <div class="circle_bg"></div> <div class="content">I'm centered, but a height must be set for me.</div>
</div>
<div class="circle"> <div class="circle_bg"></div> <div class="content">I'm centered too did you know?, with a height of course!</div>
</div>
<div class="circle"> <div class="circle_bg"></div> <div class="content">I'm centered too did you know? How cool are we!?</div> </div>
</div>
</body>
</html>

Vertically Align text - Script Codes CSS Codes

/* Using display table */
.displaytable { display: block; clear: both; margin-bottom: 20px; overflow: hidden;
}
.displaytable .circle { width: 200px; height: 200px; border-radius: 200px; display: table; float: left; margin: 0 5px; position: relative;
}
.displaytable .circle_bg { position: absolute; top: 0; left: 0; background: #000; width: 100%; height: 100%; border-radius: 200px; z-index: -1; opacity: 0.4;
}
.displaytable .content_wrap { display: table-cell; vertical-align: middle; text-align: center;
}
.displaytable .content { color: #fff; width: 150px; margin: 0 auto;
}
/* Using position center */
.absolutetrick { display: block; clear: both; margin-bottom: 20px; overflow: hidden;
}
.absolutetrick .circle { width: 200px; height: 200px; border-radius: 200px; display: table; float: left; margin: 0 5px; position: relative;
}
.absolutetrick .circle_bg { position: absolute; top: 0; left: 0; background: #000; width: 100%; height: 100%; border-radius: 200px; z-index: -1; opacity: 0.4;
}
.absolutetrick .content { color: #fff; width: 150px; height: 55px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}
Vertically Align text - Script Codes
Vertically Align text - Script Codes
Home Page Home
Developer Ash Durham
Username ashdurham
Uploaded January 05, 2023
Rating 3
Size 1,872 Kb
Views 4,048
Do you need developer help for Vertically Align text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Durham (ashdurham) Script Codes
Name
A Pen by Ash Durham
Cross Browser Placeholders
Viewport Media Query example 1
Responsive scrolling text
Radio status lights with gradients
Animated Progress Bar
Social Share Button Counter
Dynamic video proportion
Viewport Media Query LESS example
Animated scroll navigation layout
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!