[ANSWERED] html – Add a circle with a number next to a div with centered text

Question 1

(edited after comments)

You can use two wrapper elements for that text, where the outer one (.inner-text-wrap-1 in my snippet) has display: flex; and justify-content: center for the centering, and the inner one has a max-width (set value as desired).

Note that I also changed some other details, like display: table; and width: 100% for the container etc.

#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: 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;line-height: 32px;">
    <div class="inner-text-wrap-1">
      <div class="inner-text-wrap-2"> Η ισχυρή ιατρική σύσταση αποτελεί τον κυριότερο άξονα προαγωγής του εμβολιασμού και εξάλειψης των χαμένων ευκαιριών.&nbsp;<sup>45</sup></div>
    </div>
  </div>
</div>

Question 2

I want to add a circle with a number next to a div with centered text(see the image attached for the final outcome that I need).

I think that I’ve almost made it, but I cannot center the text. If you think you can help me or if you know a better way to to this, please help.

Here is my work:

#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>

Bollate

[ANSWERED] html – Add a circle with a number next to a div with centered text

By

Solution 1 :

Problem :

Comments

Comment posted by SuzieKay

Comment posted by Johannes

Comment posted by SuzieKay

Comment posted by Johannes

Comment posted by SuzieKay

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate