Aligning text in a <td> cell within a PHP SQL presentation

I am facing an issue with a table in which data is displayed using SQL and PHP. The problem arises because the second column contains a picture (column named "thumbsrc"), causing the text in the first column (column named "photosrc") to not center itself and remain at the top.

https://i.sstatic.net/JVACi.png

                <table class="table table-hover spacer">
                  <thead align="center" class="strong">
                    <td>NAME</td>
                    <td>PHOTO</td>
                    <td></td>
                  </thead>

                  <?php foreach($lstProperty as $rowProperty) { ?>
                    <tr align="center">

                      <td>
                        <?php
                          echo($rowProperty['photosrc']);
                        ?>
                      </td>

                      <td>
                        <img src="../img/_uploads/lease/thumbs/<?php echo $rowProperty['thumbsrc']; ?>.jpg" class="w-10">
                      </td>

                      <td>
                        <img src="img/icon-remove.png"></a>
                      </td>

                    </tr>
                  <?php } ?>
                </table>

I have attempted to center the text in the first column:

                      <td style="margin: 0 auto;">
                        <?php
                          echo($rowProperty['photosrc']);
                        ?>
                      </td>

I tried the following:

 <td style="margin-top: auto; margin-bottom: auto;">

 <td class="my-auto">

However, none of these solutions successfully centered the text. I would appreciate assistance in finding the correct code to achieve proper alignment.

Answer №1

It is not advisable to center the row using the align attribute, as it lacks support in HTML 5. It is recommended to utilize CSS for this purpose.

To horizontally center text, you can either use

<td align="center">My Text</td>
or CSS:
<td style="text-align: center;">My Text</td>
. For more information on CSS text alignment, refer to the CSS text-align property.

For vertical alignment, you can employ the CSS property vertical-align with the value middle.

Therefore, it is recommended to use:

<td style="text-align: center; vertical-align: middle;">
    <?php
       echo($rowProperty['photosrc']);
    ?>
</td>

Answer №2

By default, the table cells are vertically aligned to the center. However, this alignment can be overridden by parent classes. To ensure vertical alignment in a cell, you can use inline styles:

To center content vertically:

<td style="vertical-align:middle">

To center content horizontally:

<td style="text-align:center">

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

Exploring JSON data using Mustache JS

I've been attempting to use Mustache JS to iterate through JSON Data and populate a table that follows this format: { "Pay":[ [ "Regular Hours", "$75.00", "$75.00" ] ], "Earnings":[ [ "Re ...

What is the best way to extract the first heading tags from a post and showcase the outcome?

Can someone help me with changing the_title() function to a heading tag that I manually input in posts? I have created a post loop list using table code but I am stuck at this point... Desired Title Format: <h3 style="text-align: center;">Title Here ...

The onBlur attribute does not seem to be functioning properly under a specific condition

I've been attempting to customize the appearance of a search box using the onFocus and onBlur attributes, but unfortunately I haven't been able to achieve the desired outcome. Below is my HTML code: <form action="index.php" method="post" clas ...

Troublesome tab key function in FireFox causing navigation issues

I'm facing an issue with the tab key focus on links in FireFox. Strangely, it's working fine in Chrome but in FireFox, it keeps looping within one element. For better understanding, I have created a demo showcasing this behavior specifically in ...

Utilizing Google Maps API v3 to display driving directions on a map, starting with the loading of two positions

Hey there! I've got this cool map that shows two locations with markers and centers between them. Check it out live here: I'm working on integrating it with the Directions service, similar to this demo: https://developers.google.com/maps/documen ...

A guide on using Beautiful Soup to retrieve all text elements from a specific class

This is my custom code snippet: # -*- coding: utf-8 -*- from time import sleep import requests from bs4 import BeautifulSoup def get_all_coins(): response = requests.get("https://coinmarketcap.com/") soup = BeautifulSoup(response.content, 'ht ...

The adjustment in margin triggers a ripple effect on several div elements

My goal is to make my logo image move up on hover without affecting the text below it. However, I'm facing an issue where both elements are triggered simultaneously even though they are in different divs wrapped in a parent div. It seems like there mi ...

Tips for styling a select element within a listview with the help of JQuery Mobile

Here is my current situation: http://jsfiddle.net/w6PAC/3/ I am looking to position the select button next to the count without affecting the vertical size and alignment of the list item. Methods I have attempted include: Creating CSS based on the .ul- ...

Adjusting Font Sizes with Bootstrap 4 Media Queries: A Simple Guide

I recently incorporated Bootstrap into my project, but I've encountered an issue with the fixed heading sizes. I'm attempting to modify the font size of my project, especially because the h1 and h2 text appears overly large on mobile devices. Str ...

Uneven gaps in the process of creating a CSV document

I need to extract raw text data from a website using screen-scraping, format it, and then export it to a CSV file. The raw data is correctly formatted, but the line breaks are not being preserved. Servicing Option: Retained/CTOS,,,Servicing Fee Rate: 0.25 ...

"Creating a new element caused the inline-block display to malfunction

Can someone explain why the createElement function is not maintaining inline-block whitespace between elements? Example problem First rectangle shows normal html string concatenation: var htmlString = '<div class='inline-block'...>&l ...

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

What is causing my homepage to not redirect to a detailed view in Django?

Following a tutorial on codemy.com, I noticed that my "magic" disappeared around the time Django 5.0 rolled out. The tutorial was originally written for version 3.8 or 4.X. While the class-based view was recommended on the Codemy YouTube channel, I decided ...

There seems to be an issue with the Angular QuickStart project as it is not functioning properly, showing the error message "(

After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...

Using a CSS3 transition delay for a single HTML element

Is it possible to create a transition delay from one CSS attribute to another on the same element? For example, I want to transition the width of a div element first and then transition its height. <div class="rect" id="box2"></div>​ Here i ...

The Box element surpasses the height of the Grid component

Homepage Component <Box component="fieldset" sx={{borderRadius:2, height:"100%"}}> Application Structure Component <Grid container> <Grid item xs={4} > <Root/> </Grid> ...

How challenging is it to transfer a CSS file from one .NET server to another?

Let's break it down: - Our website is constructed using a commercial CMS known as Sitefinity - The structure of the web site is based on .NET - We have both a test server and a live server established for development purposes (HTML, CSS, JavaScript ...

Discover the best way to simultaneously trigger or detect all instances of a component when it is used multiple times in Ember

I have developed a unique custom component that allows users to type and choose from a dropdown menu. The dropdown menu is created dynamically using a div element. I have successfully implemented functionality to close all open dropdown menus when clicking ...

a height of 100% with a minimum height of 100%

Is there a way to make the third and fourth rectangles have the same position while filling all the remaining height in %? Keep in mind that we can't change the min-height:100% on the body or html. Feel free to use CSS and HTML for your code solution. ...

When creating a fully clickable div, remember to close the <a> tag where it starts

I am trying to make the entire div clickable, but when I embed my div code within an anchor tag, it doesn't seem to be clickable at all. Even upon checking the console, it appears that the anchor tag is closing right after opening. Can someone please ...