Paragraph of Text in Circle Using CSS

How to draw a circle with text in the middle?

Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.

Example

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

Paragraph of text in circle using CSS

Eric Meyer's book "Eric Meyer on CSS" talks about this (Project 10) and the text wrap solutions that you found use the same principle.

Using a simple border-radius: 50% does not affect the shape of the content box, which are rectangular at this time. For example, see the demo by Kyle Sevenoaks.

There is a CSS3 module under development that addresses this issue:

http://dev.w3.org/csswg/css-shapes

However, this spec is still in draft mode and not currently supported, probably a year or two out.

The short answer is no, but hopefully the comments will provide some insight.

Put html circle beside a div and paragraph tag

You can do this using the CSS Flexbox.

Here I've added display: flex to the container .header-step and flex-shrink: 0 to the .circle to ensure it maintains its shape.

.circle {  width: 50px;  height: 50px;  border-radius: 50%;  font-size: 30px;  color: #fff;  line-height: 50px;  text-align: center;  background: #16444d;  display: block;  margin-right: 1em;  flex-shrink: 0;}
h1 {  margin-top: 0;  font-weight: 700;  color: #053740;  font-size: 30px;}
p {  font-size: 18px;  color: #919191;}
.header-step {  display: flex;  width: 85%;  margin-left: auto;  margin-right: auto;  margin-top: 25px;}

<div class="header-step ">  <div class="circle">1</div>  <div style="display:inline-block;">    <h1>Some very very long header</h1>    <p>He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting<br> and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable,<br> and he had indeed the vaguest      idea where the wood and river in quedtion were.</p>  </div></div>

Can I use HTML and CSS to wrap text through a circle?

You could try using border-radius:50% on a div containing your text. Or isn't that what you mean?

<body>
    <div>
        <p>this is content</p>
    </div>
</body>

div {background:red;height:50px;width:50px;border-radius:50%;padding:5%;text-align:center;}
p {margin:0;}

http://jsfiddle.net/NAvbX/

Text in circle do responsive

Use the following padding-technique to make responsive circles:

.circle {    position:relative;    display:inline-block;    margin-right: 10px;}.circle span {    padding:60% 10%;    margin-top:-0.6em;    display:flex;}.circle span:after {    content:'';    position:absolute;    top:0; left:0;    width:120%;    padding-bottom:120%;    background-color:#eee;    border-radius:50%;    z-index:-1; }

<div class="circle"><span>0</span></div><div class="circle"><span>100</span></div><div class="circle"><span>10000</span></div><div class="circle"><span>1000000000000</span></div>