Question

有人可以告诉我如何将文本放在css样式圈中，这样它就会出现而不是顺序出现。

以下是jsfiddle https://jsfiddle.net/zhxysyrz/

这是代码

<title>Page Title</title>
<style>
.roundFormat {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    font-size: 1em;
}
</style>

<body>
<span class='roundFormat'>7 Apr</span>

</body>
</html>

因此，在圆圈内而不是按顺序排列7月4日，如何在不增加圆圈尺寸的情况下将其堆叠如下。

7
APR

由于

编辑：这是我想要的格式！http://imgur.com/a/aNg33

Answer 1

您可以使用display：table和disply：table-cell垂直对齐圆圈中的文本和br，以便文本放到第二行。

这是一个解决方案https://codepen.io/anon/pen/aWxbmx

<强> HTML

<div class='roundFormat'>
    <div class='roundFormatWrap'>7<br>apr</div>
</div>

<强> CSS

.roundFormat {
    display: inline-block;
    height: 60px;
    width: 60px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    font-size: 1em;
    display: table;
}

.roundFormatWrap {
    display: table-cell;
    vertical-align: middle;
    line-height: 14px;
}

Answer 2

＆＃13;

<title>Page Title</title>
<style>
.roundFormat {
    display: inline-block;
    height: 60px;
    width: 60px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #C0C0C0;
    color: white;
    text-align: center;
    font-size: 1em;
    word-wrap: break-word;
  }
  
  .roundFormat>span:first-child {
    display: block;
    line-height: 40px;
  }
  
  .roundFormat>span:not(:first-child) {
    display: block;
    line-height: 0px;
  }
}
</style>

<body>
  <span class='roundFormat'><span>7</span><span>apr</span></span>
</body>

＆＃13;

格式化样式圈内的文本

2 个答案: