Having trouble getting CSS to center text properly. It just won't cooperate

After spending 2 days trying to figure this out on my own, I have come to a dead end. It seems that my lack of expertise in CSS is the root cause of the issue.

Here is the code snippet I am working with:

<table class="demo">
<tr>
<th style="background:#FFFFFF;border:0px solid #FFFFFF;" WIDTH="140">
        <img src="https://xxxxxxxxxx.com/images/genesys_logo_1.png" border="0"><BR><BR>
</th>
<th>
    <form method="post" action="https://xxxxxxxxxx.com<?php echo $thisPage; ?>" onsubmit="return mysubmit(this);">
    <input type="hidden" name="primary" value="<?php echo array_values($p_key)[$i]; ?>">
    <input type="hidden" name="archived" value="y">
    <input style="float: left; display: block;margin: 42px 0px 0px -1px ;!important;" type="submit" VALUE="&#9988"/>
    </form>
        <span style="font-size: 16px; !important;"><?php if(array_values($link_kt)[$i]!="") {?><A href="<?php echo array_values($link_kt)[$i]; ?>" TARGET="_BLANK"><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?></a><?php } ?></SPAN>
            <BR>
        <span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><A href="<?php echo array_values($link_oa)[$i]; ?>" TARGET="_BLANK"><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?></a><?php } ?></span>
    <form action="<?php echo $linkUpdate; ?>" method="post">
    <input style="float: right; display: block;margin: 6px -1px 0px 0px ;!important;" type="submit" value="&#9998;&nbsp;" />
    </form>
</th>
</tr>
</table>

And here is the accompanying CSS:

.demo {
    width:100%;
    border:0px solid #333333;
    border-bottom: 1px solid #333333;
    border-spacing:0px;
    padding:3px;
    border-collapse: collapse;

}
.demo th {
    min-width:160px;
    max-width:160px;

    border:1px solid #333333;
    padding:3px;
    background:#999999;

    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;

}

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

The cell content is not centered as desired. This issue has been causing me quite some frustration!

I want the layout to remain intact even when the screen size changes. Currently, the buttons are behaving correctly but the text alignment is off.

Any suggestions on how to tackle this problem?

Answer №1

It appears that the span in question needs to be centered.

<span style="font-size: 16px; !important;"><?php if(array_values($link_kt)[$i]!="") {?><A href="<?php echo array_values($link_kt)[$i]; ?>" TARGET="_BLANK"><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?></a><?php } ?></SPAN>
        <BR>
    <span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><A href="<?php echo array_values($link_oa)[$i]; ?>" TARGET="_BLANK"><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?></a><?php } ?></span>

To center both spans, you can assign a fixed width and margin: 0 auto. For instance, if the desired width for the first span is 1060px, include the following in the style:

<span style="font-size: 16px; width:1060px; margin:0 auto;"><?php if(array_values($link_kt)[$i]!="") {?><A href="<?php echo array_values($link_kt)[$i]; ?>" TARGET="_BLANK"><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?></a><?php } ?></SPAN>

I believe this aligns with what you're seeking:)

Answer №2

Uncertain about the issue you're facing, but here are a couple of suggestions that might aid you:

1.) Remember to use text-align: center instead of text-align: middle in your code (for horizontal centering).

2.) Keep in mind that a span is an inline element. Centering something inside a span won't have any effect. You need to center the span within its parent, so in this scenario, ensure that the table cell surrounding it has text-align: center (or maybe consider using a td if th doesn't work).

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

Webpack is failing to recognize certain CSS files

My development stack includes Vue.js 2.5.15, Webpack 4.12.0, css-loader 0.28.11, ASP.Net Core 2.1 in Visual Studio 2017. Starting with the Visual Studio asp.net core template project for Vue and Typescript, I prefer to have individual small CSS files with ...

Maintain the original order of rows in the table while shuffling the columns they appear in randomly

I need help with my table setup. The left column contains words in English, while the right column has the same words translated into Korean. Is there a way to keep the rows intact while randomizing the order of the columns? Here's an example: <ta ...

Unveiling the mystery of extracting information from a string post serialization

When working with a form, I am using this jQuery code to fetch all the field values: var adtitletoshow = $("#form_data").serialize(); After alerting adtitletoshow, it displays something like this - &fomdata1=textone&fomdata2=texttwo&fomdat ...

Exclusive workshop on concealing H1 header in Jumbotron

Trying to make a Jumbotron's height 100% of the user's browser window with a special class, but running into issues on mobile devices as a div within the jumbotron is covering up the headline. Any suggestions for a fix? Live link: HTML <di ...

color of the foreground/background input in a dropdown menu that

I am attempting to modify the foreground or background color utilized by a dash searchable dropdown when text is entered for searching in the list. The input text is currently black, which makes it extremely difficult to read when using a dark theme. Wit ...

stopping the collapsible animation of bootstrap before the medium breakpoint

I recently developed a website using Bootstrap. On my site, there is a navigation bar with menu options including 'About,' 'My Projects,' and 'Contact Me' that are hidden behind an expandable menu when the page width is less t ...

Is the HTML5 capture attribute compatible with wkwebview?

Is it supported as stated in the title? For more information, you can check out the MDN documentation (Incomplete) and the Caniuse list of supported browsers. Surprisingly, none of them mention wkwebview. Does this attribute have support in wkwebview? Kno ...

Challenges related to height

Having an issue with height in my code. My footer is set up like this: <html> <body> <div class='wrap'> <div class=principal></div> <div class='clear'></div> <foo ...

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

Issues arise when implementing a sticky position using CSS with incomplete functionality

I want to create a website with a menu bar that stays at the top even on long pages. However, when I use position: sticky in CSS, the menu disappears after scrolling a certain distance. Does anyone know how to fix this issue? HTML: <nav> <ul cla ...

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

Using Perl script to identify and highlight rows based on specific cell values

I am struggling with how to highlight a row when Column F displays a value of F. I understand that I can achieve this using CSS/JS, but I keep hitting a roadblock. Coding is new to me, so I would greatly appreciate some assistance if possible. Objective: ...

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder. Is ...

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

another option besides the nextElementSibling

I have a unique code that applies a style to the following div when another div is clicked, using nextElementSibling. var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("clic ...

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

What is the easiest way to display index.html using Django?

Hi there, After setting up Django 1.9 on my Ubuntu machine, I am looking to deploy a lightweight Django app. Here is what I have done so far: cd ~ django-admin startproject dj10 cd ~/dj10/dj10/ mkdir templates echo hello > templates/index.html My qu ...

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...