image and text align same row in the div - css

Question

I am trying to arrage image and text in align in the same. I tried below for not working. How arrage like in the image.
<div >
<img src="~/Content/Images/u130.png" alt="" />
<div>
<span style="display:inline; ">Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>

Answer 1

Try inlining the img and putting both elements in the same div. Also, spans are inline by default so you don't include the style property.
<div>
<img src="~/Content/Images/u130.png" style="display: inline;">
<span>
Belong to a membership of more than 110,000 members in 141
countries and receive recognition for your contributions
</span>
</div>

Answer 2

use <div>s and vertical-align: middle like below:
img {
height: 30px;
}
div {
display: inline-block;
vertical-align: middle;
max-width: 500px;
}
<div>
<img src="http://moneta.com.mx/web/wp-content/uploads/2014/02/check.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>

Answer 3

You are going to be hard pressed to make it align with multiple rows of text depending on which browsers you are trying to support. The vertical-align property is handled very differently between browsers, especially older browsers.
What I usually do is hack it a little bit by setting my text containers to position: relative; and then absolute position my image outside to the left and center using top and negative margins.
To apply this to your code you should be able to simply copy the .feature:after rule into your style sheet. Update the image path with your image, the height/width to match your image size, and the top margin should be changed to half the height of your bullet image. After that, it will actually create the image DOM element for you via the pseudo selector.
.feature {
max-width: 300px;
padding: 10px 30px;
position: relative;
}
.feature:after {
background: url(http://hotmexchili.com/media/infortis/blocks/product_view/bullet.png) center center no-repeat;
content: "";
display: block;
height: 17px;
left: 0px;
margin-top: -8.5px;
position: absolute;
top: 50%;
width: 17px;
}
<div class="feature">
This is a single line feature
</div>
<div class="feature">
This is a longer feature that should wrap to two lines but still have the icon centered on the left!
</div>

Answer 4

div {
display: inline-block;
vertical-align: top;
max-width: 90%;
}
I prefer using jQuery to set the max-width by subtracting the width of img.
v-align the img at top would make it align with the first line.
<div>
<img src="~/Content/Images/u130.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>