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

回答1:

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

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

回答2:

You can use float to have the text float around the span and then set the line height to match the span height

.number {
  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;
  float: left;
  line-height: 1.8em;
}

<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

回答3:

Change the display of .number from inline-block to inline-flex and add justify-content and align-items properties. Value of both these properties should be center.

To fix the line-height, you could use float.

.number {
  display: inline-flex;
  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;
  align-items: center;
  justify-content: center;
  float: left;
}

<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

Alternatively, you could use ::before pseudo-element along with CSS counter

body {
  counter-reset: myCounter;
}

span {
  counter-increment: myCounter;
  display: block;
  margin: 0 0 15px;
}

span::before {
  content: counter(myCounter);
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid #ff922c;
  color: #ff922c;
  font-weight: bold;
  padding: 5px 10px;
  float: left;
}

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

来源：https://stackoverflow.com/questions/63196183/span-with-number-and-floating-text-with-same-line-height

标签

css

text