-3
      text text text text text text text
      text text ------------------- text 
      text text |this is the image| text 
      text text ------------------- text 
      text text text text text text text

The image must be in the center and the text should be around it like making a parts of the device. The html view should be like shown in the image below.

Community
  • 1
  • 1
devhtml
  • 13
  • 4
  • does this help? https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css – Akber Iqbal Dec 26 '18 at 07:32
  • Possible duplicate of [text wrap around centered image in paragraph](https://stackoverflow.com/questions/14067445/text-wrap-around-centered-image-in-paragraph) – לבני מלכה Dec 26 '18 at 07:38
  • https://stackoverflow.com/questions/28267249/css-wrap-text-around-centred-image – לבני מלכה Dec 26 '18 at 07:38
  • no @alqbalraj i am not inserting image inside a paragrah. the image should be in center and the text should be around like marking a parts of a device. – devhtml Dec 26 '18 at 07:41

2 Answers2

0

I guess this is what you are looking for,

.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border: dashed 1px;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.circle-container a.center img {
  height: 4em;
  width: 4em;
}

.circle-container a.center {
  transform: translate(-50%, -50%);
}

.circle-container img {
  display: block;
  width: 100%;
}

.circle-container span {
  border: 1px solid;
  padding: 5px 10px;
  background-color: #ddd;
}

.circle-container a.deg0 {
  transform: translate(12em);
}

.circle-container a.deg45 {
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}

.circle-container a.deg135 {
  transform: rotate(135deg) translate(12em) rotate(-135deg);
  left: calc(50% - 3.8em);
}

.circle-container a.deg180 {
  transform: translate(-12em);
  left: calc(50% - 3.8em);
}

.circle-container a.deg225 {
  transform: rotate(225deg) translate(12em) rotate(-225deg);
  left: calc(50% - 3.8em);
}

.circle-container a.deg315 {
  transform: rotate(315deg) translate(12em) rotate(-315deg);
}
<div class='circle-container'>
  <a href='#' class='center'><img src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png'></a>
  <a href='#' class='deg0'><span>Text 1</span></a>
  <a href='#' class='deg45'><span>Text 2</span></a>
  <a href='#' class='deg135'><span>Text 3</span></a>
  <a href='#' class='deg180'><span>Text 4</span></a>
  <a href='#' class='deg225'><span>Text 5</span></a>
  <a href='#' class='deg315'><span>Text 6</span></a>
</div>
Ramesh
  • 2,297
  • 2
  • 20
  • 42
0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>

<div class="container">


  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4">
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 768px wide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt dolore esse nobis provident aperiam tempora quas alias aspernatur amet, nostrum, fugiat nam tempore, ratione, earum reiciendis autem molestias illo impedit.
        aperiam tempora quas alias aspernatur amet, nostrum, fugiat nam tempore, ratione, earum reiciendis autem molestias illo impedit.</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
        <p>To center an image, set left and right margin to auto, and make it into a block element.</p>
        <img src="https://via.placeholder.com/150" alt="Paris" style="width:50%;">
        <p>To center an image, set left and right margin to auto, and make it into a block element.</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4">
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 768px wide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt dolore esse nobis provident aperiam tempora quas alias aspernatur amet, nostrum, fugiat nam tempore, ratione, earum reiciendis autem molestias illo impedit.
        aperiam tempora quas alias aspernatur amet, nostrum, fugiat nam tempore, ratione, earum reiciendis autem molestias illo impedit.
        </p>
    </div>
</div>
</div>
</div>
</html>
Sheikh Rezwan
  • 1
  • 2