Question 329850 in CSS Question posted in
Some basic documentation can be found here.

Css – How to combine span with paragraph to behave as a single paragraph

I have RichText editor and I want to let user create its own figcaption for a figure. However, the number of a figure should be generated separetely. I want to combine user description of a figure (p tag) with a number (span tag) to make them behave as a single paragraph. I tried with float: left on a span but I can’t center it properly (the combined figcaption should have the width of entire page instead of fitting the width of an image.

Here is my demo: https://codepen.io/degel123/pen/rNRpWNQ

As you can see, this float element does not center properly. I tried adding

  width: fit-content;
  margin-left:auto;
  margin-right:auto;

to figcaption style but then content is splitted into two lines instead of keeping it in single one.

Tags:

2

Answers


  1. 0

    Use display: flex for the figcaption, and then apply justify-content;

    figcaption {
  display: flex;
  justify-content: center;
}

p {
  margin: 0
}
    Login or Signup to reply.
  2. 0

    Just use display flex and justify the content center to make it horizontally centered and then align the items center to make it vertically centered and then a .5 rem gap to show it clean (my choice)
    Here is a demo

    p {
  display: inline-block;
  
}


span {
  float: left;
}

figcaption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-align: center;
}

div {
  margin-left: auto;
  margin-right: auto;
}
    <figure>
<div style="width: 200px">
<img width="100%" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f601.png"/>
</div>
<figcaption>
<span>Fig 2.1. </span><p>Some description... </p>
</figcaption>
</figure>

    I just updated the snipped that you gave and made changes in the CSS of figcaption

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search