Ndtyjky

I'm trying to create an effect where I have centered text, but an image on either side of the text, to look like this

|                    |

|        text[image] |

| [image]text        |

|                    |

I want the text to be centered relative to the div, but I want to image to sit on either side of the text. How can I achieve this? Here is my html and css now:

<div class="text-container">

  <h1 class="text">text1</h1><span class="image"><img src="image.svg"></span>

</div> 



text-container {

    text-align: center;

}

text {

    display: inline;

}

The issue with this is that the image also gets treated as an inline element, so the whole structure, instead of just the text, is centered. How can I fix this?

Use display:flex and set padding-right if the img is before text

.text-container {

    display: flex;

    align-items: center;

    justify-content: center;

}



img{

width:50px;

height:50px;

}

.p-right{

 padding-right: 110px;

}

<div class="text-container">

  <div>

    <h1 >text1</h1>

  </div>

  <div>

     <img src="https://i.stack.imgur.com/3mG2d.jpg" />

  </div>

 

</div> 

<div class="text-container p-right">



  <div>

     <img src="https://i.stack.imgur.com/3mG2d.jpg" />

  </div>

   <div>

    <h1 >text1</h1>

  </div>

</div> 



<div class="text-container">

  <div>

    <h1 >text1</h1>

  </div>

  <div>

     <img src="https://i.stack.imgur.com/3mG2d.jpg" />

  </div>

 

</div> 

<div class="text-container p-right">



  <div>

     <img src="https://i.stack.imgur.com/3mG2d.jpg" />

  </div>

   <div>

    <h1 >text1</h1>

  </div>

</div> 

hi here is the code for your image next to text:

HTML:

<link 

 href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" 

    rel="stylesheet" id="bootstrap-css">

<script 

   src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"> 

</script>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

   <!------ Include the above in your HEAD tag ---------->



   <div class="container">

    <div class="row">

      <h2>Some Title</h2>

     </div>



 <div class="block">

      <div class="row">

      <div class="span4">

          <img class="img-left" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg"/>

        <div class="content-heading"><h3>Experience &nbsp </h3></div>

          <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem 

    malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

     </div>

  </div>

<br/>

  <div class="row">

    <div class="span4">

     <img class="img-right" src="http://www.prelovac.com/vladimir/wp- 

  content/uploads/2008/03/example.jpg"/>

     <div class="content-heading"><h3>Experience &nbsp </h3></div>

     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

    <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

   </div>

   </div>

  </div>

 </div>

CSS:

 .span4 img {

  margin-right: 10px;

 }

 .span4 .img-left {

 float: left;

 }

 .span4 .img-right {

 float: right;

 }