How can I align an image in relation to text?

Question

How can I align an image in relation to text?

I'm attempting to create an interesting layout where I have text centered with an image on each side, like this

|                    |
|        text[image] |
| [image]text        |
|                    |

My goal is to have the text centered within the div, while having images positioned on either side of the text. How can I achieve this effect? This is what my current HTML and CSS look like:

<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 problem I'm facing is that the image is being treated as an inline element as well, causing the entire structure to be centered instead of just the text. How can I resolve this issue?

html css position

Answer 1

Answer №1

To achieve the desired layout, use the CSS property display:flex and add padding-right when the img element comes before the 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.sstatic.net/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div> 

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div>

Answer 2

To achieve the desired layout, use the CSS property display:flex and add padding-right when the img element comes before the 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.sstatic.net/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div> 

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.sstatic.net/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div>

Answer 3

Answer №2

Here is the code to display an 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;
 }

Answer 4

Here is the code to display an 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;
 }

How can I align an image in relation to text?

Answer №1

Answer №2

Similar questions

The Autoprefixer script crashes with the error message: TypeError - Patterns can only be a string or an array of strings

Utilize HTML5 Application Cache solely for storing and managing dependencies

Creating a responsive card design with Material UI

AngularJS: Issue with scope not updating across several views

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

Why isn't the right-clear property functioning correctly?

Improperly positioned Divs overlapping

What causes certain content to be inaccessible when using Safari?

Submitting the form with a target of _blank will result in the form being submitted on both a

Unable to remove the most recently added Object at the beginning

Thymeleaf allows for the splitting of tables across different pages when generating a PDF document

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

What could be the source of this margin or spacing?

What are the steps to create a dynamic background image that adjusts to various

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

HTML and CSS are distinct entities with their own individual purposes and

Minimize the styling of the input placeholder CSS

Unable to access the jumbotron in Angular with Bootstrap 5

Pictures are not appearing correctly when utilizing the img-fluid class

Arranging serialized information from a tabular format and retrieving specific data