CODEWITHSUNDEEP
htmlcss
Ranger
Ranger

Reputation: 147

Enclosing text inside a circle and adding a small caption to the circle(HTML / CSS)

I am new to html and css and I am trying figure out how to build shapes using html and css.

I would like to put two line text in a circle and add a small caption to that circle as shown below, enter image description here

I want to align 6 of such circles in a two row table(each row 3 cells). Each cell in the table will be a circle (with two lines text inside) and with a small description above it.

Could someone please help me on how to go about doing this?

Thank You.

Upvotes: 2

Views: 621

Answers (3)

Apb
Apb

Reputation: 934

This can be done using CSS.

HTML Code:

<table>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
</table>

CSS Code:

<style>
.circle
{
    width:50px;
    height:50px;
    border-radius:25px;
    font-size:9px;
    color:#fff;
    line-height: 25px;
    text-align:center;
    background:#000
}
table tr td {
    padding: 10px;
    text-align: center
}
</style>

Working example: JS Fiddle

Update Fiddle: New Fiddle

Upvotes: 2

Ezenhis
Ezenhis

Reputation: 1007

Read about CSS rules called: border-radius, padding, line-height, text-align and background-color.

You can do so here ;)

Upvotes: 0

caldera.sac
caldera.sac

Reputation: 5108

try this.I wrote a code.

<!DOCTYPE html>
<html>
<head>
	<title>fade effect</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
 <style type="text/css">
  body{
  	margin: 0;
  }

div.mycircle{
  width: 500px;
  height: 500px;
  margin: 50px;
  background: -webkit-linear-gradient(blue,white);
  color: black;
  border-radius: 250px;
 
}

 </style>

<body>

<div class="mycircle">
  <span style="position: absolute; top: 250px;left: 250px;font-size: 30px;">Line 1</span>
  <span style="position: absolute; top: 280px;left: 250px;font-size: 30px;">Line 2</span>
</div>
 	


</body>
</html>

Upvotes: 0

Related Questions