What steps should I take to align the image in the middle left according to my third paragraph?

Looking to format my table row with the image on the left middle and three paragraphs in the center. The image should align with the text, but currently it is not aligned due to its positioning between "Nom" and "Type."

<div class="my-container">
      <div class="constrained">
          <table class="table table-condensed table-hover" infinite-scroll="loadMore()" infinite-scroll-container="'.constrained'">
            <tbody>
              <tr ng-repeat="item in list | limitTo: packetIndex + packetSize" ng-click="preview(item[0])" ng-class="{active: item[0].selected}">
                <td>
                  <p class="file-name" title="Click to preview file"></p>
                  <i class="fa fa-cloud-download-alt dl-file" style="margin-right:5px" title="Download file" ng-if="item.file === 1"></i>
                  <p style="text-align: center">Name: <strong>{{ item[0].name }}</strong></p>
                  <p><img ng-src="{{urlConstruc(item[0].kid)}}" alt=" "><p style="text-align: center">Type: <strong>{{ class[item[0].isa].name }}</strong></p>
                  <p style="text-align: center">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }}</strong></p>
               </td>
             </tr>
          </tbody>
        </table>
</div>

Answer №1

Here is a suggestion, I have also included a link to the jsfiddle for reference: https://jsfiddle.net/afu16g9k/4/#&togetherjs=5U562O7acI

<table width=500>
<tr>
<td align="left">
<img src="https://cdn.vox- cdn.com/thumbor/7fboRS8AmuMpmYvgRBlyOuwhipM=/0x0:1000x750/1200x800/filters:focal(0x0:1000x750)/cdn.vox-cdn.com/uploads/chorus_image/image/49579581/mobile-magic_chanpipatshutterstock.0.jpg" width="200" height="200" alt=" " align="left">
<span style="text-align:left">  
<p style="text-align: ">Name: <strong>{{ item[0].name }}</strong></p>    
    <p style="text-align: ">Category: <strong>{{ class[item[0].isa].name }}</strong></p>
    <p style="text-align: ">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }} 
</strong></p>
<span>
 </td>
</tr>
</table>

Answer №2

Implement Flexbox in the following manner:

.container {
  display: flex;
  align-items: center;
}

.abc {
  width: 80%;
}

img {
  width: 20%;
}

.abc {
  display: flex;
  flex-direction: column;
}
<div class="my-container">
  <div class="constrained">
    <table class="table table-condensed table-hover" infinite-scroll="loadMore()" infinite-scroll-container="'.constrained'">
      <tbody>
        <tr ng-repeat="item in list | limitTo: packetIndex + packetSize" ng-click="preview(item[0])" ng-class="{active: item[0].selected}">
          <td>
            <div class="container">

              <img ng-src="{{urlConstruc(item[0].kid)}}" alt=" ">
              <div class="abc">
                <p style="text-align: center">Name: <strong>{{ item[0].name }}</strong></p>

                <p style="text-align: center">Type: <strong>{{ class[item[0].isa].name }}</strong></p>
                <p style="text-align: center">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }}</strong></p>
              </div>

            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maximizing Bootstrap: Enabling dual dropdown options side by side on a single row

I am attempting to design a login form within a Bootstrap navbar dropdown. My goal is to have the bottom item display two items side by side in the same row (login/register), but I am struggling to achieve this. You can view what it currently looks like h ...

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

disabling empty elements in a React JS JavaScript component

Currently, I am retrieving data from an API where users can post content up to 3 times. However, if a user has not posted three times, empty boxes with padding and background color will appear. I want to remove all elements that do not have any content wit ...

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...

Tips on how to toggle/close a dropdown menu that is displayed on a different page using Vue

Below is a screenshot of my cart dropdown: https://i.sstatic.net/IdOZK.png The issue I am facing is that the cart stays open even when I navigate to another page. I need it to close when I move to a different page. Below is my component code: <template ...

Inverting the hierarchy of a tree structure

I am currently working with a tree structure and utilizing the jstree jQuery plugin. My main objective is to reverse the structure. https://i.sstatic.net/PG1Ha.png The desired structure should resemble the one shown in this image. I have made modificatio ...

Implementing CSS to effectively scale images within a fixed box size

I am attempting to create a collection of images with rounded borders that will expand on hover, while staying within a specified box size. I want the effect to give the illusion that the image is only zooming inside the box and not physically enlarging on ...

Establishing a primary color for all text in Vuetify

How can I set a base color for all text in a Vue + Vuetify project? I attempted to change the theme's primary color in vuetify.ts: export default new Vuetify({ theme: { themes: { light: { primary: "#E53935", }, }, }, } ...

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

What is preventing me from toggling classes?

Managing a compact to-do list where you have the ability to add new tasks and when clicking on an item, it should toggle between two classes while removing one. <ul id="myUL" class="todoList"> <li class='todoList card border-primary&apos ...

Restricting HTML Code within a DIV Container

I am currently developing a plugin and widget-centric CMS system. In this setup, a widget consists of a snippet of HTML/JavaScript code that is contained within a main div element known as the widget div. For JavaScript frameworks, I have opted to use jQ ...

How do I customize the default styling of a single slider in react-slick?

Looking to enhance the look of slick carousels by customizing prev/next arrows and controlling their position? I'm currently using nextjs13, chakra-ui, react-slick, and vanilla extract. An effective way to customize arrow styles is by passing an arro ...

Attempting to seamlessly run a PHP file in the background by utilizing Ajax when a link is clicked

I am trying to execute a PHP file in the background when a link is clicked without the user being directed to the actual PHP file. After realizing that Ajax is the only way to achieve this, I attempted to implement it but encountered issues. Instead of ru ...

Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

Tips on keeping these elements centered

I'm having trouble keeping these blocks of code centered. Can someone help me out? Here's the code snippet: main { width: 70%; float: left; clear: both; border- ...

Ways to stop a background image from repeating?

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /> ...

Having difficulty with PHP code, attempting to output some HTML while also opening a file and displaying its contents

I'm completely new to PHP and I've been experimenting with some code to display button elements that, when pressed, should open a file and write a number to it. Unfortunately, the code doesn't seem to be working as expected and I'm stru ...

Including a Script Tag in an Angular 2 Application with a Source Attribute retrieved from a Web API Request

Situation: Within my Angular 2+ application, I am utilizing a web API to retrieve URLs for script tags created by a function called loadScript during the AfterViewInit lifecycle hook. The web API is providing the expected JsonResult data, which I have suc ...

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

My file structure is organized as follows: The main file is located in the folder "HTML-Project/index.html". Within this folder, I have my style.css file and two other folders: one for pictures (HTML-Project/pictures) and another for categories (HTML-Proje ...