I want to display an image in a table in the center of a cell, but this is what i get. My image covers the complete cell rather than being placed in the center of the cell . I am using an img-responsive class for image and table-responsive for table both from the bootstrap file.
Further, whenever I load the page, i get one of the following outputs randomly with absolutely no change in the code.
Why does this happen??
In both the cases image, image will be seemed to be positioned to the left side of the column, how do I correct it so that image is positioned in the center.
Following is the code
<div class="table-responsive inside_content ps-container" style="margin-bottom: 50px">
<style>
th,td{
text-align: center;
}
</style>
<table id="event" class="table table-striped table-responsive">
<thead>
<tr>
<th>Serial No.</th>
<th>Section</th>
<th>TimeStamp</th>
<th>Archive_Status</th>
<th>Event Picture</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test1 </td>
<td>
Event3 </td>
<td>
2015-01-08 19:41:45 </td>
<td>
0 </td>
<td>
<a class="event_group1" href="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg">
<img alt="No Image" class="img-responsive" style="max-width:145;max-height: 208px" src="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg" />
</a>
</td>
<td>
<span class="fa fa-fw fa-trash" ></span>
<span class="fa fa-fw fa-edit" ></span>
</td>
</tr>
</tbody>
</table>
</div>
You must treat the TD like you would treat a P,
add a text-align:center to the TD and a display:inline-block to the image
<td style="text-align: center;">
<img style="display: inline-block;" />
</td>
<td style="text-align: center;">
add css to that td to align text in the center, it should apply for the image as well
Add align="center" to the cell .
Eg.
<td align="center">
<img src="...
how about adding
display:inline / inline-block;
margin:0px auto;
I hope it will answer your question
Related
I'm showing a member who has a higher rank. Based on that, I have to show the user image along with the username.
but I'm not able to align the image and text efficiently..The problem is some username consists of a longer number of characters. As a result, the username showed in a zig-zag position..
so far, I've tried
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='../assets/img/gold.png'/>Rank</th>
<th><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
<tr>
<td>
1
</td>
<td>
<div class='text-center'>
<img src='images' alt='user dp' class=' img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>#$username</span>
</div>
<td>
</tr>
</thead>
<tbody>
Expected output:
Rank Member
1 image Dravid
2 image Richard Nixon
3 image GrahamBell
4 image Mark twains
Output's getting:
Rank Member
1 image Dravid
2 image RichardNixon
3 image GrahamBell
4 image Mark twains
img {margin-right:10px;};
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Member</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><img src="image"/>member</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="image"/>anotherMember</td>
</tr>
<tr>
<th scope="row">3</th>
<td><img src="image"/>oneMoreMember</td>
</tr>
</tbody>
</table>
Please check your table markup, it doesn't seems to have any data in <tbody> . If you have to show the user image before the username place the <img/> inside the <td> tag just before the name of the member(in your case username). This will give you the alignment as per your need, no matter how long is the username provided that the size(mostly width) of all the images is same. I have included little CSS just to provide some space between all images and usernames. Also make sure this space remains constant for all images, if you wish to include it.
Your problem is that you are using the text-center class on each <tr>'s second <td> (to display the username). That's because your those are centered accordingly resulting in this bug:
In order to solve this you have to replace it with text-left like in this example. The same for the second <th>. In order to place your item more to the right, apply a padding-left, e.g., by adding Bootstrap's pl-5:
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='https://via.placeholder.com/25'/> Rank</th>
<th class="text-left pl-5"><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>Dravid</span>
</div>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>RichardNixon</span>
</div>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>GrahamBell</span>
</div>
</td>
</tr>
</tbody>
</table>
You can find a running fiddle here, which produces the following table:
I have this code below.
If I run this code here on a browser, everything works fine.
But, in an HTML e-mail: the code does not work as intended.
The height seems to be the main issue, the height I have configured automaically becomes min-height on an HTML email.
This is what it looks like on the email:
My ultimate goal is to: center an image horizontally and vertically inside of a element that has defined width and height in an HTML email (sample of desired output is on the runnable snippet below).
<table>
<tbody>
<tr>
<td style="padding-top:10px;">
<p style="text-align:center;height: 105px;background-color:#282828;width: 80px;" height="85">
<span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
<img width="50" height="75" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&t=1542159076&ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&sig=.ZExttgldk1nd96JyybAyQ--~C">
</p>
</td>
<td>
<span>Adult Classic Tee</span>
</td>
<td>
$ 21.00
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="padding-top:10px;">
<p style="text-align:center;height: 105px;background-color:#282828;width: 80px;vertical-align: middle; display: table-cell;" height="85">
<span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
<img width="50" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&t=1542159076&ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&sig=.ZExttgldk1nd96JyybAyQ--~C">
</p>
</td>
<td>
<span>Adult Classic Tee</span>
</td>
<td>
$ 21.00
</td>
</tr>
</tbody>
</table>
I have a table which contains data and I want the first footer item to be aligned left and the remaining ones to be aligned right.
Here is expected results:
table {
width: 100%
}
<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
</tbody>
<tfoot class="footer">
<tr align="left">
<td id="cart_voucher" class=" cart_voucher">
<form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
<div class="form-group form-group-placeholder">
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value="">
<i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
<input type="hidden" name="submitDiscount">
</div>
</form>
</td>
</tr>
<!-- end VOUCHER -->
<!-- Total products -->
<tr align="right">
<td>Total products </td>
<td id="total_product">500,00 zł</td>
</tr>
<tr align="right">
<td Total shipping (tax incl.):>
</td>
<td id="total_shipping" class="price-opc">12,00 zł</td>
</tr>
<tr align="right">
<td>Total (tax excl.):</td>
<td id="total_price_without_tax" class="price-opc">418,50 zł</td>
</tr>
<!-- end Total tax excl. -->
<!-- Total tax -->
<tr align="right">
<td>Total tax:</td>
<td>93,50 zł</td>
</tr>
<!-- end Total tax -->
<tr align="right">
<td>Total:</td>
<td>
<span>512,00 zł</span>
</td>
</tr>
</tfoot>
</table>
I used inline align="left" for first footer element and align="right"for the remaining ones. I get the following:
UPDATE more explanation
In a footer we have form input and other data , form input should be left and the remaining footer element should be right as image describe below
I tried using flex-box for each tr but nothing worked. Can someone please help me? I just want the first element in the footer to align left and the rest to align right. Thanks, any help or suggestions will be helpful. Ignore thead and tbody, just consider tfoot.
You can apply float attribute for which accept right or left velues
.container {
width: 100%;
height: 100px;
background-color: red;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: right;
background-color: yellow;
}
<div class="container">
<div class="left">Left Child</div>
<div class="right">Right Child</div>
</div>
This is how the attribute is work
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
<table>
<tr>
<td style="text-align:right">
<div style="float:right;">
<span class="style5 style6">
<span class="style8">
Forget Password?
</span>
</span>
</div>
</td>
</tr>
</table>
how to align the link forgetpassword at right corner top of the page
Your table width is not wide enough to set the link on the right side. Set the table width to 100% and your code will work.
<table width="100%">
<tr>
<td style="text-align:right;">
<div style="float:right;">
<span class="style5 style6">
<span class="style8">
Forget Password?
</span>
</span>
</div>
</td>
</tr>
</table>