Hi,
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
<table>
<tr>
<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>
<tr>
</table>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 
Thanks
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.
OR
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 !!!@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
<td>
<div style="float-left"><i class="fas fa-exclamation-circle fa-lg"></i></div>
<div style="float-left">long text here</div>
</td>
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.