在圆圈内添加文本并在圆圈中添加小标题（HTML/CSS）

问题描述：

我是新来的html和css，我试图弄清楚如何使用html和css构建形状。在圆圈内添加文本并在圆圈中添加小标题（HTML/CSS）

我想将两个行文本在一个圆圈，并添加一个小的标题到圆，如下所示，

我要对齐这样圆6的两页的表（每行3中细胞）。表格中的每个单元格都是一个圆圈（里面有两行文本），并在上面有一个小的描述。

请问有人能帮助我如何去做这件事吗？

谢谢。

能否请你迄今所做的代码？ –

答

这可以使用CSS完成。

HTML代码：

<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代码：

<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>

工作例如：JS Fiddle

更新小提琴：New Fiddle

另外请记住，你几乎可以在任何图形设计工具（Photoshop任何人？）中使用吸管，以获得所需颜色方案上的十六进制数字。 –

非常感谢您的回答。我想知道是否可以将圆圈内部的文字对齐到圆圈中心。 – Ranger

@Ranger如果这个答案可以帮助你，请接受它，以便将来的读者将得到正确答案你的问题。 – Apb

答

尝试this.I写了一码。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>fade effect</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
</head> 
 
<style type="text/css"> 
 
    body{ 
 
    \t 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> 
 
    \t 
 

 

 
</body> 
 
</html>

答

阅读有关称为CSS规则：边界半径，填充，行高，文本对齐和背景颜色。

你可以这样做here;）

在圆圈内添加文本并在圆圈中添加小标题（HTML/CSS）

相关推荐