Ways to merge a span element with a paragraph to function as one continuous block of text

I am working with a RichText editor and I am trying to allow users to create their own custom figcaption for a figure. The challenge is that the figure number must be generated separately. I want to merge the user's description of the figure (p tag) with the number (span tag) to make them appear as a single cohesive paragraph. I attempted to use float: left on the span, but I am struggling to center it correctly (the combined figcaption should span the width of the entire page rather than just the width of the image).

Check out my demo: https://codepen.io/degel123/pen/rNRpWNQ

As you can see, the float element is not centering properly. I attempted to add

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

to the figcaption style, but then the content splits into two lines instead of remaining on one line.

cssreactjs

Answer №1

To style the figcaption, utilize the CSS property display: flex, and then add justify-content;

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

p {
  margin: 0
}

Answer №2

To center the content both horizontally and vertically, use display flex with justify-content and align-items set to center. Add a .5 rem gap for a clean look. Check out the demo below:

p {
  display: flex;
  justify-content: center;
  max-width: 15rem;
}

span {
  float: left;
}

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

div {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <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>
</body>
</html>

I have updated the CSS in the figcaption and added flex properties to make the content stack vertically and look better, regardless of the length of the description text. The p tag is also centered now for a more visually appealing layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JSP page is unable to locate or access relative resources such as CSS stylesheets and images

I'm struggling to create a basic web page using JSP. The issue I'm facing is that no resources, such as images or CSS, are being found regardless of the URL I use. Here is my simple JSP code: <%@ page language="java" contentType="text/html; ...

javahtmlcssjsp

Is it more advantageous to keep track of whether an item is being watched (item is watched) on the frontend or backend in a React Node application

I am working on a watchlist feature that allows users to add items. I am debating whether it is better to display an add button or a message indicating that the item is already on the watchlist. Should I store the 'isWatched' property on the fron ...

node.jsreactjs

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

javascriptjquerycsshtmltoggle

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Looking at the layout, I have two sections that take up the entire page. My goal is to detect when the second section is 20% visible while scrolling, and then smoothly scroll to lock that section in place so it occupies the full space. This action should a ...

javascripthtmlcss

Having trouble rendering the map on my React page

Struggling to display a list of objects in a React component. The data is fetched correctly and logged to the console, but for some reason, the object names are not rendering in a list on the screen when the page reloads. Can't figure out where the er ...

javascriptreactjsarrayslistrender

Bootstrap button statuses confirmed

I am trying to implement a checked state for group checkboxes in Bootstrap 3.0.2. documentation This is the HTML code snippet: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="check ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieving a parameter in NextJS from the request.body when it is not found

In the API code for my nextJS, I have implemented the following logic: export default async function handler(request, response) { if (request.method === "POST") { const type = request.body.type ?? 'body type' const ...

javascriptreactjsnext.js

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

The error "relative error: invalid property value" occurs when setting the width and height of a parent element

I'm having trouble getting my h2 text to appear above my images when hovered over. I keep receiving an error message in Chrome Developer Tools saying that "display: relative" is not a valid property value, but I can't figure out why. I've se ...

htmlcss

What is the best way to retrieve the current language in getStaticProps in Next.js?

In my upcoming application, I am utilizing i18n and need to retrieve the current page language in getStaticProps before fetching data export const getStaticProps = async () => { //Need to access language here return { props: { data }, }; }; ...

reactjsnext.jsi18next

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

The hyperlink function is malfunctioning when used with the embed tag in both Internet Explorer and Chrome browsers

<param id="movie" name="movie" value='<%= Me.ResolveUrl(Me.BannerPath)%>'> <a href='http://<%= BannerTargetUrl%>' target="_blank"> <embed wmode="transparent" src='<%= Me.ResolveUrl( ...

csshtmlhyperlinkcross-browser

Issues with Bootstrap-slider.js functionality

I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with fetching data in React from a URL?

When attempting to send a post request to a specific URL without proxy settings, I encountered a CORS error. After setting up a proxy, the URL was still pointing to localhost. The error persists even after attaching my proxyfile.js and including the code s ...

javascriptreactjs

Manifest.json encountered an unexpected token

Recently, I deployed a react/express project on Heroku () and encountered some console errors. You can check out the errors in the Chrome console error messages. I tried researching the error, and it seems like I might need to make some changes in my mani ...

javascriptnode.jsreactjsexpressmanifest.json

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

htmlcssdisplayobject-fit

Guide to creating a CSS horizontal line with square elements on either side of a title

I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design. https ...

htmlcss

The z-index of two elements seems to be behaving differently than anticipated

I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...

htmlcss

issue with custom $position-values not being recognized in Bootstrap 5

Having trouble positioning text on top of a bootstrap carousel using Bootstrap's position class. The default values (0,50,100) aren't giving me the appearance I want. I tried adding custom values to the $position-values in my scss file, but they ...

csssassfrontendreact-bootstrapbootstrap-5

What is the reason I am unable to utilize a redirect in the layout component in next.js?

I am in the process of developing an application with protected routes. When a user is logged in, they are directed to the dashboard; if not authenticated, they are redirected to the login page. Currently, I have been implementing this logic on every prot ...

reactjsnext.jsserver-side-renderingnext-authsupabase