image and text side by side html css responsive

Image and text side by side html css

by


Yes, you can display an image and text side by side in HTML and CSS using several methods. Here are a few examples:

1: Using CSS Flexbox

You can use CSS flexbox to display an image and text side by side. Here’s an example:

<div class="container">
  <img src="image.jpg" alt="Image">
  <p>Text</p>
</div>
.container {
  display: flex;
  align-items: center;
}

img {
  margin-right: 10px;
}

In this example, the container element is set to display: flex, which makes its child elements (img and p) display side by side. The align-items: center property centers the child elements vertically within the container. The margin-right property is used to add some spacing between the image and the text.

Read also, How to Link to HTML to CSS in Visual Studio Code

2: Using CSS Grid

You can also use CSS grid to display an image and text side by side. Here’s an example:

<div class="container">
  <img src="image.jpg" alt="Image">
  <p>Text</p>
</div>
.container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

img {
  grid-row: 1 / 2;
}

The author sets the container element to display as grid, which creates a grid layout for its child elements, img and p. The grid-template-columns property is used to set the width of the two columns, with the first column set to auto to adjust to the image size, and the second column set to 1fr to take up the remaining space. The align-items: center property centers the child elements vertically within the container. To add spacing between the image and the text, the gap property is used. Finally, the author uses the grid-row property to place the image in the first row of the grid.

3: Using HTML Tables

Finally, you can use HTML tables to display an image and text side by side. Here’s an example:

<table>
  <tr>
    <td><img src="image.jpg" alt="Image"></td>
    <td><p>Text</p></td>
  </tr>
</table>

The table element is used to create a table layout for its child elements (tr, td, img, and p). The tr element creates a row, and the td elements create columns within the row. The image and text are placed in separate td elements, which are displayed side by side. However, note that using tables for layout purposes is generally discouraged in modern web development, and it is recommended to use CSS instead.

Leave a Comment