如何制作css'蜗牛'？

Question

我有一个想要显示为带有(border-radius:50%)的圆圈的图像,并且在同一行上我希望有一些具有设置宽度和背景的文本.我不想硬编码任何值.实现这一目标的最佳方法是什么？

这是一张照片

小提琴

<div class="header">
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
    <p class="headingText">Hello</p>
</div>

.i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.headingText {
    color: white;
    background: black;
    display: inline-block;
    width: 350px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

Answer 1

你可以尝试这样的事情:

.header
{
  padding-top:26px;
  padding-left:40px;
  position:relative;
}
.i
{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  top:0;
  left:0;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
}