Place text in the center of a div and add a numbered circle beside it

I need help adding a circle with a number next to a div containing centered text. Take a look at the image I have attached for reference.

https://i.sstatic.net/tHA65.png

I believe I am close to achieving the desired outcome, but I am struggling to center the text within the div. If you have any tips or a better method to accomplish this task, please share your insights.

Below is the code I have been working on:

#container2 {
  margin-top: 25px;
}

.fs1 {
  display: table-cell;
  vertical-align: middle;
}

.cl {
  color: #b6ebe8;
  font-size: 31px;
  font-weight: 700
}

#a3 {
  border-radius: 50%;
  background-color: #1cbbb4;
  padding: 0 18px;
  text-align: center;
  color: white;
  margin-right: 25px;
}
<div id='container2' style="text-align:center;background: #00a99d;border-radius: 55px;">
  <div class='fs1' id='a3' style="-webkit-box-shadow: 42px 2px 21px -3px rgba(0,0,0,0.69);-moz-box-shadow: 42px 2px 21px -3px rgba(0,0,0,0.69);box-shadow: 10px 4px 16px 4px rgba(0,0,0,0.69);">
    <div class='fs1 cl'>1</div>
  </div>
  <div class='fs1 text-center py-2' style="color:white;font-size:23px;max-width:756px;line-height: 32px;"> Η ισχυρή ιατρική σύσταση αποτελεί τον κυριότερο άξονα προαγωγής του εμβολιασμού και εξάλειψης των χαμένων ευκαιριών.&nbsp;<sup>45</sup></div>
</div>

htmlcssfrontend

Answer №1

(updated based on feedback)

To center the text, you can utilize two wrapping elements - the outer one (.inner-text-wrap-1 in the code snippet) with styles display: flex; and justify-content: center, and the inner one having a specified max-width.

Additionally, adjustments have been made such as using display: table; and width: 100% for the container, among other changes.

#container2 {
  margin-top: 25px;
  display: table;
  width: 100%;
}

.fs1 {
  display: table-cell;
  vertical-align: middle;
}

.cl {
  color: #b6ebe8;
  font-size: 31px;
  font-weight: 700;
  display: block;
}

#a3 {
  border-radius: 50%;
  background-color: #1cbbb4;
  padding: 0 18px;
  text-align: center;
  color: white;
  margin-right: 25px;
}

.inner-text-wrap-1 {
  display: flex;
  width: 100%;
  justify-content: center;
}
.inner-text-wrap-2 {
  display: block;
  text-align: center;
  max-width: 500px;
}
<div id='container2' style="text-align:center;background: #00a99d;border-radius: 55px;">
  <div class='fs1' id='a3' style="-webkit-box-shadow: 42x 2px 21px -3px rgba(0,0,0,0.69);-moz-box-shadow: 42px 2px 21px -3px rgba(0,0,0,0.69);box-shadow: 10px 4px 16px 4px rgba(0,0,0,0.69);">
    <div class='fs1 cl'>1</div>
  </div>
  <div class='fs1 text-center py-2' style="color:white;font-size:23px;line-height: 32px;">
    <div class="inner-text-wrap-1">
      <div class="inner-text-wrap-2"> Strong medical recommendation is the key driver for vaccination promotion and eradication of missed opportunities.&nbsp;<sup>45</sup></div>
    </div>
  </div>
</div>

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

Importing CSS and JavaScript files into a JSP page in Spring MVC

After adding a CSS file to my JSP file, I encountered an issue that prompted me to search for solutions. Despite trying the tutorial from the following link, it did not work for me: My project was created using Spring Tool Suite and here is my file struct ...

javacssspringjspspring-mvc

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

htmlcss

JavaScript does not alter the text box for the default dropdown value

My webpage has three elements: a text box named txtSubTotal, a drop-down menu named discount, and another text box called txtGrossTotal. The txtSubTotal updates when the user clicks on the 'ADD' button, while the txtGrossTotal updates based on th ...

javascripthtml

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

javascripthtmljquerycss

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

jquerycss

Is there a way to prevent a web page from automatically refreshing using JavaScript?

I would like my webpage to automatically refresh at regular intervals. However, if a user remains inactive for more than 5 minutes, I want the refreshing to stop. There is an example of this on http://codepen.io/tetonhiker/pen/gLeRmw. Currently, the page ...

javascriptjqueryhtml

AngularJS enhances user experience by allowing textareas to expand upon click

I am just starting to learn about angular.js and I'm wondering how to add a text area when clicking on an image. ....... ..... ..... </thead> <tbody> <tr ng-repeat="stu in Studentlist"> <td>{{stu.rollno}}</td> <td> ...

javascriptjqueryhtmlangularjs

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

Tips for separating <td> tags within a series of <td>

I am working with the HTML code provided below. <tr> <td class="slds-cell-wrap" data-label="">Category</td> <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td> <td clas ...

htmlcsshtml-table

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

javascripthtmlrweb-scrapingrvest

How to locate the position of a specific word on a webpage using jQuery

In my div, I am struggling to search like an editor. Despite multiple attempts, I have not found a solution yet. Can someone please advise me on how to resolve this issue? <div id="content"> <p> Lorem Ipsum is simply dumm ...

javascriptjqueryhtml

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

The Challenge of Toast Notifications Visibility with <dialog> Element tl;dr When utilizing the native dialog.showModal() function, the <dialog> element appears to consistently remain on top, which causes toast notifications to be obscured by ...

javascripthtmlnext.jsdialogreact-hot-toast

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Tips for displaying buttons and images on the same line using CSS

Below is the JavaScript code I am using: $('#needdiv').append('<img src="/images/Connect.png" id="connectimage">' + '</img>' + '<input type="button" id="connect" value=connect >' + '&l ...

javascriptjqueryhtmlcss

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

What is the process for spinning an image?

Is there a way to rotate an image around its center? I am looking for a solution where the image rotates continuously when clicked, but stops if an ajax call is unsuccessful. Please assist me in finding a resolution. ...

jqueryhtmlcss

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3