Centering text with CSS not behaving right. Will not center - html

Question

I've been fiddling with this for 2 days, and can't seem to get it right. So thought I would ask for a resolution here. (I'm not a css expert and that is where the problem lies.)
So I have the following code:
<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]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
<BR>
<span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?><?php } ?></span>
<form action="<?php echo $linkUpdate; ?>" method="post">
<input style="float: right; display: block;margin: 6px -1px 0px 0px ;!important;" type="submit" value="✎ " />
</form>
</th>
</tr>
</table>
And the following 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;
}
It displays the cell like this: Notice the 2 lines of text (in spans above) are NOT centered ... and it is driving me crazy !
I want everything to stay in place when resizing the screen. Right now the buttons are behaving perfectly but I cannot for the life of me get the text to stay centered.
Thoughts ?

Answer 1

I think this is the span that need to be centered
<span style="font-size: 16px; !important;"><?php if(array_values($link_kt)[$i]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
<BR>
<span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?><?php } ?></span>
For making it centered give both the span a fixed width and margin:0 auto
For example if you want the width for the 1st span to be 1060px then in style add width and margin as:
<span style="font-size: 16px; width:1060px; margin:0 auto;"><?php if(array_values($link_kt)[$i]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
I hope this is what you are looking for:)

Answer 2

Not sure what your problem is, but two points which might help:
1.) It's text-align: center , not text-align: middle like in your code (for horizontal centering)
2.) A span is an inline element. To center something inside a span therefore doesn't do anything. You have to center the span inside it's parent, so in this case the table cell around it has to have text-align: center (or in your case actually the th - maybe you should insert a td here in case that doesn't work)