Center image inside or alignment

  • Hi,
    maybe I don’t fully understand the usage of <dev>, I’m struggling with this particular problem for days.
    I’m trying to create page similar to eBay list page, this is what I managed to create:
    https://totaltronics.com/instrument-cluster-repairs/bmw/

    The code I wrote:

    <div id="listing">
<div id="listingImg"><img class="alignleft wp-image-317" src="https://totaltronics.com/wp-content/uploads/2017/06/repair300x300.jpg" alt="BMW pixel repair" width="200" height="200" /></div>
<div id="listingTitle"><a href="https://totaltronics.com/instrument-cluster-repairs/bmw/bmw-e38-e39-e53-x5-lcd-repair/">BMW E38 E39 E53 X5 LCD Pixel Instrument Cluster Repair Service</a></div>
<div id="listingDescr">Missing pixels on LCD, lack of backligth etc.</div>
<div id="listingPrice">￡60</div>
</div>

    and css:

    #listingImg {
	max-width: 25%;
	margin: 0 5px 0 0;
	padding: 0;
	float: left;
}

    It looks good when image is square. If it’s not, when shrinked to mobile size, image goes to the top of its container and text wraps under the image.

    div
    Top line contains not square picture, bottom one is square.

    So the solution is either to center the image horizontally inside it’s div which I have no idea how to do, or to somehow tell the text divs to align to the border of image.

    Any help very appreciated.

    • This topic was modified 7 years, 5 months ago by rosak.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Neil

    (@neilgilmour)

    WCLDN 2018 Contributor

    Hey @rosak,

    I had a quick look at your site and the images are set to max width 25%. This means that as the screen gets smaller they are much smaller relative to the size of the text, so the text starts to wrap round. There also seems to be something funny happening with the width of the three other <div>s. I tried making them width:75%; but it just put a massive margin on the rhs.

    You could try combining the three <div>s of the text into one, and give it clear:left;

    Is this the Storefront theme from WooCommerce?

    I’m off to bed now but let me know how you get on…

    Thread Starter rosak

    (@rosak)

    Hi @neil,
    thanks a lot for interest.
    I can try to combine 3 divs into one, but I don’t know how to then assign 3 separate styles to these 3 lines of text. I will try to figure it out.
    And yes, it’s Storefront from WooCommerce.
    I’m off to bed too, will let you know tomorrow.
    Regards

    Neil

    (@neilgilmour)

    WCLDN 2018 Contributor

    Are you all sorted now @rosak?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center image inside or alignment’ is closed to new replies.