Problem początkującego

pytanie zadane 11 sierpnia 2016 w HTML i CSS przez Snich Nowicjusz (220 p.)
zamknięte 11 sierpnia 2016 przez Snich

Zaznaczę na początku, dopiero zaczynam. Mam problem. Chciałbym stworzyć menu swojej pierwszej strony na podstawie 5 okręgów w których znajdzą się odpowiednie teksty, całość będzie pełnić funkcję linku. Lecz nie mam pomysłu jak zrobić by tekst był w okręgu a nie pod. Poniżej załączam dwa kody z css i html. Z góry dziękuję za pomoc i wyrozumiałość.

<html lang="pl">

<head>
<title>Moja strona</title>
<meta name="keywords" content=""/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>

<body>
 <div id="container">
 
  <div id="one">
   <svg width="200px" height="200px">
   
   <circle cx="100" cy="100" r="100" fill="#006666" />
   
   </svg>
  </div>

  <div id="two">
   <svg width="200px" height="200px">
   
   <circle cx="100" cy="100" r="100" fill="#006666" />
   
   </svg>
  </div>

  <div id="three">
   <svg width="200px" height="200px">
   
   <circle cx="100" cy="100" r="100" fill="#006666" />
   
   </svg>
  </div>
  
  <div id="four">
 
   <svg width="200px" height="200px">
   
   <circle cx="100" cy="100" r="100" fill="#006666" />
   
   </svg>
   
  </div>
 
  <div id="five">
   <svg width="200px" height="200px">
   
   <circle cx="100" cy="100" r="100" fill="#006666" />
   
   </svg>
  </div>
  
 </div>  
</body>

</html>

.....................................................................................................................................................................

body
{
background-color: #99CCCC;
font-family: 'Raleway', sans-serif;
font-weight: 400;	
}

#one
{
margin-top: 70px;
margin-left: 382.5px;
margin-right: 200px	;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}

#two
{
margin-top: 70px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;		
}

#three
{
margin-top: 60px;
margin-left: 182.5px;
float: left;
clear: both;
height: 200px;
width: 200px;
background-color: #99CCCC;
}

#four
{
margin-top: 60px;
margin-left: 200px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}

#five
{
margin-top: 60px;
margin-left: 200px;
float: left;
height: 200px;
width: 200px;
background-color: #99CCCC;
}

komentarz zamknięcia: Rozwiązanie poroblemu