1. #1
    SideShow's Avatar
    Registered
    21/08/02
    Location
    Roeselare
    Posts
    4,474
    iTrader
    15 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/35

    Image (net niet) centreren

    Hallo

    Ik wil mijn image centreren (horizontaal en verticaal), maar dan toch net weer iets naar boven ...
    Centreren lukt me natuurlijk, met de 500 biljoen hits op google, maar dan wil ik bvb 10% van de schermhoogte weer ophoog.

    Iemand hulp?
    no votes  

  2. #2
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Hangt ervan af welke techniek je gebruikt, maar dikwijls geef je gewoon een negatieve margin-top van 10%.
    no votes  

  3. #3

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Edit this Fiddle - jsFiddle

    Code:
    img {
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -175px; /* breedte afbeelding / 2 */
        margin-top: -75px; /* hoogte afbeelding / 2 */
    }
    no votes  

  4. #4
    SideShow's Avatar
    Registered
    21/08/02
    Location
    Roeselare
    Posts
    4,474
    iTrader
    15 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/35
    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    Edit this Fiddle - jsFiddle

    Code:
    img {
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -175px; /* breedte afbeelding / 2 */
        margin-top: -75px; /* hoogte afbeelding / 2 */
    }
    ok, best een mooie oplossing maar dan moet ik voor een foto albumpje telkens de dimensies ophalen met javascript lijkt me
    no votes  

  5. #5

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Dat gaat ook: Edit this Fiddle - jsFiddle
    Code:
    $("img").each(function () {
        var $this = $(this),
            mL = -$this.width() / 2,
            mT = -$this.height() / 2;
        $this.css({
            "margin-left": mL,
                "margin-top": mT
        });
    });
    no votes  

Posting Permissions

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

Log in

Log in