Display: table-cell; adding extra space on left of text - html

Question

I am fairly new to html and css have been kind of struggling to get my text aligned vertically next to an image using css and html.
I came across a nice solution using "display: table-cell;" in the class and "display: table;" in it's container class.
This seemed to work until I came across a case where my text didn't spill over to a second line. For whatever reason, it seems my text which the shorter sentence is aligned to the center of the space between the image and the next column.
Html:
<h3 class="red-header">
Buttons Header
</h3>
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 1</span>
<br /> short line extra space on the left</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 2</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
</div>
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 3</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 4</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered </p>
<a class="feature" href="google.ca"></a>
</div>
</div>
CSS:
.red-header {
background-color: #be1e2d;
color: #FFF;
font-size: 1rem;
font-family: Lato, Helvetica, Arial, sans-serif;
padding: .6rem;
text-align: center;
}
.row {
width: 100%;
}
.icon-text {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.column {
width: 50%;
display: table;
position: relative;
float: left;
}
.red-text {
color: #be1e2d;
margin-bottom: 0px;
margin-top: 10px;
line-height: 1;
}
.icon-img {
float: left;
width: 115px;
padding: 5px 16px 5px 0px;
}
.feature {
position: relative;
}
/* used to make entire div into a clickable element */
.feature {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* No underlines on the link */
z-index: 10;
/* Places the link above everything else in the div */
background-color: #FFF;
/* Fix to make div clickable in IE */
opacity: 0;
/* Fix to make div clickable in IE */
filter: alpha(opacity=1);
/* Fix to make div clickable in IE */
}
/* visualization of the button using a hover */
.divLink:hover {
background-color: #b1e3e6;
}
My apologies for a terrible explanation, please see the following fiddle for clarity. Issue is in the "Button Text pt 1"

Answer 1

You can fix the spacing issue you are having with your current code by adding the following width: 100% to the .icon-text class:
.icon-text {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
Of course I still recommend you go with flexbox instead.

Answer 2

Is this closer to what you were looking for? display: table should only be used for tables, which this isn't. You want Flexbox!
https://jsfiddle.net/o092e0y9/

Answer 3

Here's the solution with what you have now
https://jsfiddle.net/4Lp507cw/5/
HTML
<h3 class="red-header">
Buttons Header
</h3>
<div class="table">
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 1</span>
<br /> short line extra space on the left</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 2</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
</div>
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 3</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 4</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered </p>
<a class="feature" href="google.ca"></a>
</div>
</div>
</div>
CSS
.red-header {
background-color: #be1e2d;
color: #FFF;
font-size: 1rem;
font-family: Lato, Helvetica, Arial, sans-serif;
padding: .6rem;
text-align: center;
}
.table{width:100%; display:table;}
.row {
width: 100%;
display:table-row;
}
.icon-text {
height: 100%;
vertical-align: middle;
float:left;
width:70%;
}
.column {
width: 50%;
display: table-cell;
position: relative;
}
.red-text {
color: #be1e2d;
margin-bottom: 0px;
margin-top: 10px;
line-height: 1;
}
.icon-img {
float: left;
width: 25%;
padding: 5px 16px 5px 0px;
}
.feature {
position: relative;
}
.feature {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* No underlines on the link */
z-index: 10;
/* Places the link above everything else in the div */
background-color: #FFF;
/* Fix to make div clickable in IE */
opacity: 0;
/* Fix to make div clickable in IE */
filter: alpha(opacity=1);
/* Fix to make div clickable in IE */
}
.divLink:hover {
background-color: #b1e3e6;
}