Align text and image in the middle of the cell

Question

Can you help me to align the text and the image of the center of the cell ?
for the table, tab 'Followers' (#page4 {})
thanks !
https://code.sololearn.com/WC4Ncb88P3rB/?ref=app

Answer 1

add to #table4 td

display:flex;
justify-content:center;
align-items:center;

try reaserching more about flexbox (flex property)
you can do a lot of aligning with it to make the page responsive

Answer 2

@Visph thanks :) go see my last code gold Code, and see the table tab 'followers', it was to align the text vertically :v) so the align-items is good ;)
https://code.sololearn.com/WC4Ncb88P3rB/?ref=app

Answer 3

thanks :D 😍😘 😂

Answer 4

line 96
$('#table4').append("<tr align='center'><td><img src='"+imageFollowers[i]+"'/><span>"+followersTable[i]+"</span></td></tr>");

Answer 5

@JFS:
align="center" is deprecated in html5, and anyway will only make horizontal centering ^^

@Burey:
Flex is not the proper way to do centering in <table> context, as this will broke the <td> default behaviour (display:table-cell). All the more that that was the only old way allowing real vertical centering, using 'vertical-align:middle;' css property/value (and obviously 'text-align:center;' for horizontal centering ;))

@Shinbi:
<table> is not intended to be used for layout purpose... if you want to use <table> behaviour for layout purpose, it's better practice to use more well suited semantical elements regarding your content, and apply to them required css 'display' ('table', 'table-row', 'table-cell'...). However, as suggested by @Burey, you can use more recent useful flexbox layout features to advantageously replace <table> behaviour in layouting context ;)

Anyway, centering <td> (table data, ie: table cell) content is done with this simple 2 css rules:

text-align:center;
vertical-align:middle;

Answer 6

thanks both :D

Answer 7

@Shinbi:

Yes, in that particular context (#table4) it break anyway the <td> behaviour, but it doesn't make visible break ^^ So, correcting is quite useless, and will require to differently handle user avatar pictures (wich will be zero sized if 'flex' is retrieved)

But your try to use flex in #table3 context fail, as you not really success to vertical align ;P
But in this case, it's mostly because you missuse flexbox:
+ you use 'position:flex;' instead of 'display:flex;'
+ you try to apply 'flex' on <img> element instead of it's container.
In addition, you mix 'float' property, and use of unknown 'align' property :P (first will complexify html/css structure unnecessarly, and second is syntax error)

For the 2nd problem, your html structure will help to avoid use of 'flex' on <td>, but will make more difficult to handle it also: better way would be to rework html... anyway, pure css solution is possible, but simple <td> vertical center isn't easily doable as you make the only <a> child of type block. Rather make it 'display:flex' and 'width:100%' (it's no more a 'block' type getting full width available): you can now flex-vertical-align both content... 'float' property is better to be deleted from img, and right alignement done with 'position' use on it with 'absolute' value and on its parent (<a>) with 'relative' to be the referent element to position <img> (with css 'right:0'). To finalize, you need to remove/adapt padding values as necessary in this new css context:

https://code.sololearn.com/Wtbm29UOIo5v/?ref=app

(I have added some useful border declaration for visualization/debug purpose: they have obviously to be deleted in final project ;))