[CSS] Wyśrodkowanie zdjęć, CSS, wyśrodkowanie, zdjęcia Opcje

[ayo1001]

HTML:

Kod

<div class="container">
                <div class="col-md-12">
                        <section class="filter">
                    
                        <input id="select-type-all" name="radio-set-1" type="radio" class="selector-type-all" checked="checked">
                        <label for="select-type-all" class="label-type-all">Wszystko</label>
                        
                        <input id="select-type-1" name="radio-set-1" type="radio" class="selector-type-1">
                        <label for="select-type-1" class="label-type-1">Kwiaty</label>
                        
                        <input id="select-type-2" name="radio-set-1" type="radio" class="selector-type-2">
                        <label for="select-type-2" class="label-type-2">Pliki</label>
                        
                        <input id="select-type-3" name="radio-set-1" type="radio" class="selector-type-3">
                        <label for="select-type-3" class="label-type-3">Obrazki</label>
                        
                        <ul class="items">
                            <div class="row">
                                    <li class="item-type-2">
                                        <a href="#">
                                            <span>Chameleon</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Tutorials (wip)</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Symplas website</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-2">
                                        <a href="#">
                                            <span>Flower</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-3">
                                        <a href="#">
                                            <span>TRON: Mobile version</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Tailoring accessories</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-3">
                                        <a href="#">
                                            <span>App icon</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Event Planning</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                    <a href="#">
                                            <span>Tutorials (wip)</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Symplas website</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-2">
                                        <a href="#">
                                            <span>Flower</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-3">
                                        <a href="#">
                                            <span>TRON: Mobile version</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Tailoring accessories</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-3">
                                        <a href="#">
                                            <span>App icon</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                                    <li class="item-type-1">
                                        <a href="#">
                                            <span>Event Planning</span>
                                            <img src="images/200x200.jpg">
                                        </a>
                                    </li>
                            </div>
                        </ul>
                    </section>
                </div>
            </div>

CSS:

Kod

.filter {
    text-align: center;
    display: block;
}
.filter label {
    text-transform: uppercase;
    cursor: pointer;
    color: #777;
    background: #FFF;
    font-weight: normal;
}

.filter input.selector-type-all:checked ~ label.label-type-all,
.filter input.selector-type-1:checked ~ label.label-type-1,
.filter input.selector-type-2:checked ~ label.label-type-2,
.filter input.selector-type-3:checked ~ label.label-type-3 {
    background: #BBB;
    color: #CCC;
}
.filter input{
    display: none;
}

ul.items {
    padding-left: 0;
}

.items{
    position: relative;

    padding-top: 20px;
}
.items a{
    display: block;
    position: relative;
}
.items a span{
    display: block;
    color: #FFF;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}
.items a:hover span {
    height: 100%;
    opacity: 1;
}
.items li img {
    display: block;
}

.items li {
    margin: 0;
    float: left;
}
.filter input.selector-type-1:checked ~ .items .item-type-1,
.filter input.selector-type-2:checked ~ .items .item-type-2,
.filter input.selector-type-3:checked ~ .items .item-type-3{    
    opacity: 1;

}
.filter input.selector-type-1:checked ~ .items li:not(.item-type-1),
.filter input.selector-type-2:checked ~ .items li:not(.item-type-2),
.filter input.selector-type-3:checked ~ .items li:not(.item-type-3){
    opacity: 0.1;
}
.filter input.selector-type-1:checked ~ .items li:not(.item-type-1) span,
.filter input.selector-type-2:checked ~ .items li:not(.item-type-2) span,
.filter input.selector-type-3:checked ~ .items li:not(.item-type-3) span{
    display:none;
}

(IMG:http://s4.ifotos.pl/img/ajpg_ehwnres.jpg)

Jak można wyśrodkować te zdjęcia ?

Ten post edytował ayo1001 19.02.2014, 20:12:45