Results 1 to 8 of 8

Thread: OT: CSS experts? Help needed to center an image

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Feb 2009
    Location
    Kungsbacka, Sweden
    Posts
    693

    Default OT: CSS experts? Help needed to center an image

    Hi!

    I have a little problem, i would like to center an image (see code from codepen).
    The image can be at its maximum 200px in width or height. when the image is not 200x200 i want it to center left to right and top to bottom within the imagecontainer.

    The HML from codepen.io is displayed in a cWebHTMLBox


    https://codepen.io/Datamartin/pen/yLyeMEO
    Last edited by MrHalland; 9-Dec-2019 at 08:58 AM. Reason: Added mor information
    Martin Arvidsson, Data Martin i Kungsbacka AB

    I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

  2. #2
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    1,397

    Default Re: OT: CSS experts? Help needed to center an image

    Martin

    The tricky bit here is ensuring width is at least 200px under the web framework's column system, otherwise:

    Code:
    Object oMyImage is a cWebImage
        Set piColumnIndex to ???
        Set piColumnSpan to 3  // ??? Going to be wide enough?  Dunno...  Also depends on psLabel, piLabelOffest and peLabelPosition
        Set psURL to "Images/MyImage.jpg"
        Set piHeight to 200
        Set piMinHeight to 200   // Ensure it never get too small, maybe?
        Set pePosition to wiFitEnd_Object
    Experiment with different pePosition settings to see the different options and their results. You might want to play with pbFitZoom as well.

    Mike

  3. #3
    Join Date
    Feb 2009
    Location
    Kungsbacka, Sweden
    Posts
    693

    Default Re: OT: CSS experts? Help needed to center an image

    Perhaps i should add that the code is drawn in cWebHTMLBox (the code in codepen)
    Martin Arvidsson, Data Martin i Kungsbacka AB

    I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

  4. #4
    Join Date
    Mar 2009
    Location
    Beech Hill - a village near Reading in the UK
    Posts
    1,397

    Default Re: OT: CSS experts? Help needed to center an image

    Ah!

  5. #5
    Join Date
    Feb 2009
    Location
    West Yorkshire - UK
    Posts
    858

    Default Re: OT: CSS experts? Help needed to center an image

    like this?

    Code:
    .Article .ArticleItem .ImgContainer {
      width: 200px;
      height: 200px;
      margin-left: auto;
      margin-right: auto;
      background-color: blue;
      display: table-cell; vertical-align: middle;
    }
    Sean Bamforth. - D̤͍͍̭̱̄ͦ̆̏̇ͯ͑̄å̩̻͈͒͌t͇̻͙̞̤̱̏̎̐a͈͎͈ͬ̓̽ͮ̓̔̎ͅf̙͓̃̆̈́̔ ̳̣̝͔̲ḷ̩̺̗͎ͤ͂̇̚e̻̙̼̞̥͖̬̹ͮ͌ͫ̆ͬͅx͉̖̣̩̮̖̎͌ ͍̃̃̉̆̋̋ͥP̠̝̱̿͛ͬͩ̍̅̔ͣr̻̪̤͚̘̰̤͑̿̈̄̍ͯo̫͈̪̭̥͙͛̃̔̀g̔͗ͦ̅ ̝̯̘̣̘͗͆̄̋r̲͓̭͓̪̋ͩͤ͛̑́̎͋a͇̰̼͚̜̅́͌͗̆̅̏ͪͦm̯̤̱̥͇͋͒̈̅̓ͮ ̱̣̞m̖̼̰̟̗̮̬͓͗͋̏̓ͫ̑ͪͅḙ̄ͯͧ̋̋̑̊͗ͅr͕͇ͪ͒̆͗͆̓̀

  6. #6
    Join Date
    Feb 2009
    Location
    Kungsbacka, Sweden
    Posts
    693

    Default Re: OT: CSS experts? Help needed to center an image

    Hi!

    Thanx, it still doesn't work, it seems that the margin for left and right is not calculated correctly.
    It is left aligned in the container

    Check this link: https://codepen.io/Datamartin/pen/yLyeMEO
    Martin Arvidsson, Data Martin i Kungsbacka AB

    I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

  7. #7
    Join Date
    Feb 2009
    Location
    Hengelo (NL)
    Posts
    1,720

    Default Re: OT: CSS experts? Help needed to center an image

    One solution is to set is as a background-image. Roughly like this:

    Code:
    <div class="Article">
      <div class="ArticleItem" data-ServerOnClick="%1" data-OnClickParam="%2"><p class="pArticleNo">Artikelno</p><div class="ImgContainer" style="background-image: url(https://via.placeholder.com/200x160)"></div><div class="ArticleLabel"><p>Detta är en treraders text dsads dsa DS ADS AD ADSA da </p></div></div></div>
    Code:
    .Article .pArticleNo {
      text-align: center;
      position: relative;
    }
    
    
    .Article .ArticleItem {
      width: 220px;
      height: 350px;
      background-color: lightyellow;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      overflow: none;
      cursor: pointer;
    }
    
    
    .Article .ArticleItem:hover {
      border: 1px solid #777;
    }
    
    
    .Article .ArticleItem .ArticleLabel {
      text-align: center;
      cursor: pointer;
    }
    
    
    .Article .ArticleItem .ImgContainer {
      background-color: blue;
      width: 200px;
      height: 200px;  
      margin: auto;
    }
    
    
    .ImgContainer{
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

  8. #8
    Join Date
    Feb 2009
    Location
    Kungsbacka, Sweden
    Posts
    693

    Default Re: OT: CSS experts? Help needed to center an image

    Thanx!

    Exactly what I needed
    Martin Arvidsson, Data Martin i Kungsbacka AB

    I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •