How do I center a div box vertically in a table

Table row without vertical split
I want the left icon to be vertically centered as the line height increases due to the text on the right.
However, it was not centered

<td style="vertical-align:middle;"><div style="float:left; width: 30px;"><i class="fas fa-exclamation-circle fa-lg"></i><div style="float:left; width: 100%;">Text<br />TextText<br />TextText<br />TextText<br />Text</div></td>

Floats take priority over alignments. You might want to just create another TD and put the icon in that. Then, you can use just the align:middle and drop the float left.

If you don’t have to, don’t use tables. If you do, this might still work within a single <td>.

This tutorial covers it. It was the first search result for “html vertically centre image next to text”.

I wanted to find out if it is possible using as little code as possible :grinning:


The simple way is to put the icon in it’s own TD and align it to middle in either the TD or a DIV inside the TD.
put two DIV’s in the one and align BOTH to middle. You have two DIV’s but, one is nested into the other.
( If one is nested, you can not use FLOAT’s on both of them! Just will not work! )

In case you are not clear on what I said…

< div float-left>some text< /div>< div float-left>something< /div> Will float then next to each other.
< div float-left>some text< div float-left>something< /div>< /div> Will NOT float correctly as nesting negates the floats. They are not really negated, but, they take president in a way that makes them fail.

Unable to split cell for exclamation point when table’s cell split is on the right
So I wanted to put two div boxes and center the exclamation point
But I couldn’t
I solved the problem by putting new table in TD

 Glad  you  solved  it !!!
1 Like

@ErnieAlex sorry i totally understood you

Not the code I used, I wrote it here specially and I wrote it wrong

I would write like this

<div style="float-left"><i class="fas fa-exclamation-circle fa-lg"></i></div>
<div style="float-left">long text here</div>

I am sorry

Yes! As I said before, if you use float’s, you do not next the div’s.
Again, glad you solved it.

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service