具有相同行高的数字和浮动文本的跨度 [英] Span with number and floating text with same line-height

问题描述

我有一个文本，前面的圆圈里应该有一个数字.它有效，但如何垂直对齐圆圈内的数字?(填充使圆圈不再)和如何使文本浮动"?围绕圆圈，这样第一行就没有错误的行高(所有都应该相同).

I have a text and there should be a number in a circle in front. It works but how can I vertical align the number within the circle? (padding makes the circle not even anymore) and how is it possible to make the text "float" around the circle so it doesn't have a wrong line-height for the first line (all should be the same).

.number {
  display: inline-block;
  border-radius: 50%;
  height: 1.8em;
  width: 1.8em;
  margin-right: 10px;
  border: 2px solid #ff922c;
  color: #ff922c;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
}

<span class="number">1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam, accumsan
suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam dui nulla,
viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit

推荐答案

对于信息，display 也可以在没有 line-height 的情况下做到这一点.

For infos, display can also do the trick without line-height.

shape-outside 也可以使用所以文字可以绕过它.

shape-outside can also be used so the text can go around it .

.number {
  display: inline-flex;
  /* or flex, if it floats */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  height: 1.8em;
  width: 1.8em;
  margin-right: 10px;
  border: 2px solid #ff922c;
  color: #ff922c;
  font-size: 1.2em;
  font-weight: bold;
}

.number.bis {
  float: left;
  display: flex;
}

.number.bis.grid {
  display: grid;  /* for the show,but  a grid of a single cell really ? */
  shape-outside: circle(40%);
}

<span class="number">1</span><code>Inline-flex</code> but <code>inline-grid</code> would be similar. dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam, accumsan
suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam dui nulla,
viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit
<hr>
<span class="number bis ">1.1</span><code>Flex</code> & <code>float</code> dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam, accumsan
suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam dui nulla,
viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit
<hr>
<span class="number bis grid ">1.2</span><code>Grid</code> & <code>float</code> & <u><code>shape-outside</code></u> dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam,
accumsan suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam
dui nulla, viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit

这篇关于具有相同行高的数字和浮动文本的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！