What is the best way to align these text elements beside the images?

Question

What is the best way to align these text elements beside the images?

I am in need of the following:

======
=img1=  Description
======

======
=img2=  Additional Info
======

Existing HTML setup:

<div id="division-id">
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Description</p>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Additional info</p>
</div>

After applying this CSS rule:

#division-id p {
    display: in-line
}

The output appears like this:

======      ======
=img1= Text =img2= Some more Text
======      ======

Understanding why this happens and finding a suitable solution is crucial. What could be causing this issue and how can it be rectified?

html css

Answer 1

Answer №1

If you want to make changes to the HTML structure, consider enclosing the <p> and <img /> elements within a new <div> container like this:

#division-id p {
  display: inline;
}

<div id="division-id">
  <div>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </div>
  <div>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </div>
</div>

Additionally, please note that there are two errors in the code provided:

The correct CSS property is not display: in-line.
The selector used is incorrect.

Answer 2

If you want to make changes to the HTML structure, consider enclosing the <p> and <img /> elements within a new <div> container like this:

#division-id p {
  display: inline;
}

<div id="division-id">
  <div>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </div>
  <div>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </div>
</div>

Additionally, please note that there are two errors in the code provided:

The correct CSS property is not display: in-line.
The selector used is incorrect.

Answer 3

Answer №2

Here's a helpful tip for you:

To create line breaks after each paragraph tag, simply add a <br> tag. For example:


<div id="division-id">
  <a href="[href]"><img src="images/img1.png"</a>
  <p>Text goes here</p><br/>
  <a href="[href]"><img src="images/img2.png"</a>
  <p>More text goes here</p><br/>
</div>

CSS:

#division-id p{ display:inline; vertical-align:top}

Answer 4

Here's a helpful tip for you:

To create line breaks after each paragraph tag, simply add a <br> tag. For example:


<div id="division-id">
  <a href="[href]"><img src="images/img1.png"</a>
  <p>Text goes here</p><br/>
  <a href="[href]"><img src="images/img2.png"</a>
  <p>More text goes here</p><br/>
</div>

CSS:

#division-id p{ display:inline; vertical-align:top}

Answer 5

Answer №3

Give this a try

I made an adjustment by enclosing each image and text with <div class='item'>

<div id="division-id">
    <div class='item'>
        <a href="[href]">
            <img src="images/img1.png">
        </a>
        <p>Text</p>
    </div>
    <div class='item'>
        <a href="[href]">
            <img src="images/img2.png">
        </a>
        <p>Some more text</p>
    </div>
</div>

<style>
    #division-id p {
        display: inline
    }
</style>

Hopefully, this solution is helpful to you

Answer 6

Give this a try

I made an adjustment by enclosing each image and text with <div class='item'>

<div id="division-id">
    <div class='item'>
        <a href="[href]">
            <img src="images/img1.png">
        </a>
        <p>Text</p>
    </div>
    <div class='item'>
        <a href="[href]">
            <img src="images/img2.png">
        </a>
        <p>Some more text</p>
    </div>
</div>

<style>
    #division-id p {
        display: inline
    }
</style>

Hopefully, this solution is helpful to you

Answer 7

Answer №4

Using lis instead of divs and brs is my preference because it eliminates the need for additional styling.

ul {
  list-style: none;
  margin: 0;
}

ul li a {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

<ul id="division-id">
  <li>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </li>
  <li>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </li>
</ul>

Answer 8

Using lis instead of divs and brs is my preference because it eliminates the need for additional styling.

ul {
  list-style: none;
  margin: 0;
}

ul li a {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

<ul id="division-id">
  <li>
    <a href="[href]"><img src="images/img1.png"></a>
    <p>Text</p>
  </li>
  <li>
    <a href="[href]"><img src="images/img2.png"></a>
    <p>Some more text</p>
  </li>
</ul>

Answer 9

Answer №5

.section-class p:after
{
    content: '';
    display: block;
    clear: both;
}

Answer 10

.section-class p:after
{
    content: '';
    display: block;
    clear: both;
}

Answer 11

Answer №6

If you're looking for an alternative approach, consider the following suggestion. I advise against using float:left as it may restrict your styling options in terms of height and width.

<style type="text/css">
.division_id div, .division_id>div>p{
    display:inline-block;
}
.division_id>div>a{
    vertical-align:middle;
}
</style>
<html>
<div class="division_id">
    <div>
        <a href="[href]"><img src="images/img1.png"></a>
        <p>Text</p>
    </div>
    <div>
        <a href="[href]"><img src="images/img2.png"></a>
        <p>Some more text</p>
    </div>
</div>
</html>

Answer 12

If you're looking for an alternative approach, consider the following suggestion. I advise against using float:left as it may restrict your styling options in terms of height and width.

<style type="text/css">
.division_id div, .division_id>div>p{
    display:inline-block;
}
.division_id>div>a{
    vertical-align:middle;
}
</style>
<html>
<div class="division_id">
    <div>
        <a href="[href]"><img src="images/img1.png"></a>
        <p>Text</p>
    </div>
    <div>
        <a href="[href]"><img src="images/img2.png"></a>
        <p>Some more text</p>
    </div>
</div>
</html>

What is the best way to align these text elements beside the images?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Keep one row in a grid with five columns in Bootstrap

The proper way to showcase an apostrophe in HTML when dealing with a viewmodel's string property

I'm having some trouble getting my HTML menu within the header tag to hover correctly in Angular. Can someone please provide

Hosting services and content management system for a website built with Twitter Bootstrap

Eliminating the muted attribute does not result in the sound being restored

Examining the code - I'm having trouble locating the origin of its creation

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

What is the best way to stop a page from reloading when a hyperlink is clicked, instead redirecting to the new page while ensuring the code on that page functions correctly?

What is the best way to emphasize this specific section of text?

Checkbox and Ionic avatar image combined in a single line

Modify the class of the <select> element when it has been clicked or altered using JavaScript or jQuery

What is the best way to figure out the resolution of a computer screen using javascript?

Responsive design issues with Bootstrap Popover

Control the HTML button's state according to the information received from the server

My draggable item seems stuck in place. Any ideas on how to get it moving again?

Is it better to define the SVG `viewbox` once in a `symbol`, or each time an SVG is `used`?

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

"Seeking assistance with concept sharing and content transmission. In need of guidance

The Django tag `{% block content %}` seems to be malfunctioning

The placeholder in the text input field is missing