One issue I am facing in my UI is that I have buttons with images floating next to text. While the setup works well, I am struggling to vertically align the image with the text.
I've experimented with various solutions including using vertical-align: center;, attempting absolute positioning, and even trying a transform technique that didn't work out as planned.
Since the content for these buttons is user-generated and dynamic, adjusting line height isn't a viable option in this case.
Any assistance on resolving this matter would be greatly appreciated!
The HTML structure of my code resembles the following:
<div class='btn-primary col-md-4'>
<img src='https://developers.google.com/web/fundamentals/imgs/placeholder--small.png'/ >
<span class='imgInfo'>This is info. (Repeat) </span>
<p class='clearfix'></p>
</div>
The CSS style applied looks something like this:
img{
vertical-align: middle;
float:left;
width:50%;
}
.imgInfo{
margin-left: 0px;
overflow:auto;
display:block;
float:right;
width:50%;
padding-left:1em
}
To interact with and test the code further, feel free to utilize this jsFiddle link: http://jsfiddle.net/52VtD/7356/