如何创建矩形的圆形图像？ CSS

Question

我试图在圆形图像下添加项目列表，并且发生以下情况：

我希望这些项目彼此对齐。 有谁知道如何解决它？ 这些项目位于容器内，每个项目都包含以下display: inline-block

以下是参考代码：

＆＃13;

＆＃13;

*{
  align-items: center;
	align-content: center;
	text-align: center;
	height: 100%;
	margin-top: 0px;
}
.container > div {
	display: inline-block;
	vertical-align: top;
	width: 33.3%;
}

#myImage {
	width: 70%;
	border-radius: 50%;
	-webkit-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
}

＆＃13;

<img src="images/twitter.png" id="myImage">

      <div class="container">
        <div>a</div>
        <div>b</div>
        <div>c</div>
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我添加了左边的浮动，它现在似乎正好紧挨着坐着。您可以在容器类下面的div周围添加填充/边距，以便从上面隔开它。

        *{
          align-items: center;
        	align-content: center;
        	text-align: center;
        	height: 100%;
        	margin-top: 0px;
        }
        .container > div {
        	display: inline-block;
        	vertical-align: top;
        	width: 33.3%;
          float:left;
        }
        

        #myImage {
        	width: 70%;
        	border-radius: 50%;
        	-webkit-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
        	-moz-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
        	box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);
        }

        <img src="images/twitter.png" id="myImage">

              <div class="container">
                <div>a</div>
                <div>b</div>
                <div>c</div>
              </div>

让我知道它现在是否适合你。