Position text inside translated element

position css
center div horizontally and vertically
css position: absolute center horizontal and vertical
center div vertically
center image in div vertically and horizontally
css vertical-align: middle
div align: center
css center text vertically

I want to achieve such thing:

The text is located inside a half circle, which is on a card. The circle has a minimum width and a maximum ( in order not to full up the full card ). The text can be in 1 or 2 rows maximum.

I cant handle the text positioning, so it would be 10px from the card border. Any ideas?

Here is my current snippet:

.list_item {
  height: 85px;
  width: 300px;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
}

.circle {
  display: inline-block;
  background: blue;
  min-height: 200px;
  min-width: 200px;
  max-width:300px;
  border-radius:99999px;
  transform: translate(-50%, -50%);
}

.text {
    overflow-wrap: break-word;
    overflow: hidden;
}
<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 1
      </div>
  </div>
</div>
<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 2222222222222222222222222222222222222222222222222222222222222222222222222
      </div>
  </div>
</div>
<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 3 3333 3333
      </div>
  </div>
</div>

You could have the text in a regular rectangular div where the content flows normally, and then append a slight curvature afterwards with a ::after pseudo element that is set to position: absolute and a couple pixels past the furthest distance right

Demo in Stack Snippets

.list_item {
  height: 85px;
  width: 300px;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
}

.circle {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 0px 3px 0 10px;
    display: inline-flex;
    align-items: center;
    background: #0000ce;
    color: white;
    max-width: 150px;
    z-index: 0;
}

.circle::after {
    content: " ";
    background: #0000ce;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: -1;
    right: -20px;
    margin-top: -44px;
}
<div class="list_item">
  <div class="circle">
      Item 1
  </div>
</div>

<div class="list_item">
  <div class="circle">
      Item 2 - Longer
  </div>
</div>


<div class="list_item">
  <div class="circle">
      Item 3 - Longer With Line Wrap
  </div>
</div>

CSS: centering things, in a heading. CSS has the property 'text-align' for that: (The '50%' in 'translate​(0, -50%)' refers to the height of the element itself.) Recently  However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.


Here is my approach to this problem, I believe it is that you wanted to achieve.

.list_item {
  height: 85px;
  max-width: 300px;
  width: 100%;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
   overflow: hidden; 
  position: relative;
  display:flex;
}

.circle {
    background: blue;
    display: flex;
    align-items: center;
    border-bottom-right-radius: 100px;
}

.text {
  color: #fff;
  min-width: 80px;
  display: inline-block;
  padding: 0 30px 0 15px;
  max-width: 300px;
  font-weight: bold;
  font-family: Arial;
  text-overflow: ellipsis;
}
<div class="list_item">
  <div class="circle">
    <div class="text">
        It was loooong helloooooo
      </div>
  </div>
</div>

<div class="list_item">
  <div class="circle">
    <div class="text">
        Half long helooo 
      </div>
  </div>
</div>


<div class="list_item">
  <div class="circle">
    <div class="text">
        Helooooo
      </div>
  </div>
</div>

<div class="list_item">
  <div class="circle">
    <div class="text">
        More helloo helloo helloo helloo helloo helloo 
      </div>
  </div>
</div>

<div class="list_item">
  <div class="circle">
    <div class="text">
        Even more helloo helloo hello hellohello hello Multiple lines helloo helloo hello hellohello hello
      </div>
  </div>
</div>

 

Absolute Centering in CSS - Frontend Weekly, horizontally in CSS you can do it just by, using the text-align: center; the item like in the absolute example (but only translate the height). position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.


you may also draw the circle from a radial gradient:

give a blue background to the text container and a right padding where the curve is supposed to stand. A sibbling(tag or pseudo) filling up the room left, -that's where flex comes handy-, will draw the curve from a radial gradient on its far left side overlapping the text box.

example of the idea (tune the values to your needs)

li {
  height: 85px;
  max-width: 300px;
  width: 100%;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: start;
}

li span {
  display: flex;
  flex-shrink: 1;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  padding: 10px 50px/* let room for sibling to overlap*/
  10px 10px;
  background: blue;
  color: white
}

li:after {
  content: '';
  flex: 1;
  margin-left: -50px;
  /* overlap previous sibling*/
  background: radial-gradient(circle at -150px -40px, blue 200px, white 201px)
}

span[class] {
  max-width: 60%;
  color:tomato
}
<ul>
  <li><span>some text</span></li>
  <li><span>no max-width fill it to the end aaa aaa aaa</span></li>  
  <li><span class>max-width for that one only set for the demo</span></li>
  <li><span>some text <br>some text</span></li>
  <li><span>some text some text some text <br>some text</span></li>
</ul>

SVG Text Layout: Words as Art, Any text content within an SVG that isn't inside a <text> element will not be would also align the text in the same position: <text x="10px" transform="translate​(0  To use positioning on an element, you must first declare its position property, which specifies the type of positioning method used for an element. Using the position property values, the elements are positioned using the top, bottom, left, and right properties. They also work differently depending on their position value.


Centering in the Unknown, Nope, it can be a pseudo element. /* This parent can be any width and height */ .​block { text-align:  Use a <button> element. Place a block element inside (a <div> will do fine) Give the block element bottom padding and put your text inside it. See it in action. Alternatively, if you do not want to enlarge the button you could give the block element position: relative and a negative top. See it in action.


Quick CSS Trick: How To Center an Object Exactly In The Center , I wanted the logo image to be centered exactly in the middle of the screen, that is, both. .centered { position: fixed; /* or absolute */ top: 50%; left: 50%; } The translate value for transform is based off the size of the element, so that will If you do not, you can actually use text-align to center the image since images are  When we have position: absolute, top: 50%, left: 50%, the calculations are made starting from the upper left corner. To position the text in the center, we must “move” it -50% left and 50% up by setting transform:translate (-50%;-50%). Example of vertically aligning a text with the CSS transform property:


CSS Layout - Horizontal & Vertical Align, To horizontally center a block element (like <div>), use margin: auto; To just center the text inside an element, use text-align: center; padding and line-​height are not options, another solution is to use positioning and the transform property:. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.