Centered Text in a Perfect Circle

Developer
Nick Colley
Size
2,410 Kb
Views
18,216
  1. Centered Text in a Perfect Circle Previews
  2. Centered Text in a Perfect Circle HTML Codes
  3. Centered Text in a Perfect Circle CSS Codes

How do I make an centered text in a perfect circle?

What is a centered text in a perfect circle? How do you make a centered text in a perfect circle? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.

Centered Text in a Perfect Circle Previews
IQ Test

Centered Text in a Perfect Circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Centered Text in a Perfect Circle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bubble"> <div class="bubble-outer"> <div class="bubble-inner"> <div class="bubble-text"> <h2>Hello, World.</h2> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> </div> </div> </div>
</div>
<div class="bubble bubble-secondary"> <div class="bubble-outer"> <div class="bubble-inner"> <div class="bubble-text"> <h2>Hello, World.</h2> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> </div> </div> </div>
</div>
<div class="bubble bubble-tertiary"> <div class="bubble-outer"> <div class="bubble-inner"> <div class="bubble-text"> <h2>Hello, World.</h2> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Centered Text in a Perfect Circle - Script Codes CSS Codes

.bubble { overflow: hidden; position: relative; display: inline-block; border-radius: 50%; background-color: #556; padding: 50%;
}
.bubble-outer { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}
.bubble-inner { display: table; height: 100%; width: 100%;
}
.bubble-text { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10%;
}
.bubble-text > * { color: white; padding: 0; margin: 0;
}
.bubble-semi { margin-top: -50%; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
.bubble-semi .bubble-text { padding-top: 25%;
}
.bubble-secondary { background-color: #656;
}
.bubble-tertiary { background-color: #655;
}
@media (max-width: 100px) { .bubble-text { font-size: 2em; }
}
Centered Text in a Perfect Circle - Script Codes
Centered Text in a Perfect Circle - Script Codes
Home Page Home
Developer Nick Colley
Username nickcolley
Uploaded November 12, 2022
Rating 3
Size 2,410 Kb
Views 18,216
Do you need developer help for Centered Text in a Perfect Circle?

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!

Nick Colley (nickcolley) Script Codes
Name
One element icon
Wip elementary os navbar
A Pen by Nick Colley
Subtle Animation Example
Close animation
Banner hover test
Curl Dropshadow
Brightness regulation UI design
Diagonal Nav bar
Subtle Quote
Create amazing love letters 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!