Tuesday, 19 July 2016

How to create a Circle and write text in the center


Here I will tell you how to create a circle and write text in the center of a circle also placing the circle with text in center of the page.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
body {
display: table;
background: #ccc;
}

div {
background: #663399;
border-radius: 100%;
width: 600px;
height: 600px;
text-align: center;
display: table;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

div h1 {
display: table-cell;
vertical-align: middle;
color: #fff;
}
</style>
</head>
<body>
<div>
<h1>Circle</h1>
</div>
</body>

</html>



Output:


No comments:

Post a Comment