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

Copyright 2024 - jseidl.at Julian Seidl