developers.jseidl.at
WebsiteGitHubCodePen
  • developers.jseidl.at
  • CSS
    • Bootstrap NoGutter
    • Center image
    • Hamburger Menu (Mobile Menu)
    • Table-Cell
    • mMenu Hide
  • JavaScript
    • Scroll to Element
  • Typo3
    • Cookiebanner
    • DCE Backgroundimage (Section use)
    • DCE Background Image
    • Custom Form for Indexed Search
    • Frontendlayouts for Bodyclasses
    • Frontendlayouts
  • Utils
    • Force SSL
Powered by GitBook

Copyright 2024 - jseidl.at Julian Seidl

On this page
  • HTML
  • CSS / SCSS

Was this helpful?

  1. CSS

Center image

Center an image vertical and horizontal.

HTML

<div class="wrap">
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
    <a href="#">
        <div>
            <span></span>
            <img src="" alt="" />
        </div>
    </a>
</div>

CSS / SCSS

div {
    height: 45px;
    min-width: 45px;
    text-align: center;
    margin-right: 14px;
    padding: 4px;
    position: relative;
    background-color: white;
    display: inline-block;
    span {
        width: 10px;
        height: 100%;
        display: inline-block;
        margin-left: -10px;
        vertical-align: middle;
    }
    img {
        vertical-align: middle;
        max-width: 120px;
    }
}

Last updated 1 year ago

Was this helpful?