CODEWITHSUNDEEP
htmlcss
blackhard
blackhard

Reputation: 542

if possible to align arrow by image HTML/CSS only

I have a carousel with some images and titles:

    <div class="photo-carousel">

        <div class="carousel-arrow">
            <a href="javascript:void(0);">
                <i class="arrow-left"></i>
            </a>
        </div>

        <ul class="photo-list">
            <li class="photo">
                <div class="image-wrap">...</div>

                <div class="title">....</div>

                <div class="description">...</div>
            </li>

            <li class="photo">
                <div class="image-wrap">...</div>

                <div class="title">....</div>

                <div class="description">...</div>
            </li>
        </ul>

        <div class="carousel-arrow">
            <a href="javascript:void(0);">
                <i class="arrow-right"></i>
            </a>
        </div>
    </div>

jsfiddle link: http://jsfiddle.net/u21ezn9y/

How to align .carousel-arrow elements by .image-wrap, not li height? I want the arrows will be aligned in the middle of images. What is the best way to do it?

Upvotes: 1

Views: 1118

Answers (2)

Everton Lenger
Everton Lenger

Reputation: 1446

Using only HTML / CSS, I'd remove the margins on your .image-wrap and give an absolute positioning on your descriptions. In this way, these tags won't be counted on the li height, centering the arrows.

.image-wrap {
    width: 170px;
    height: 220px;
    background: red;
}

.title {
    position: absolute;
    bottom: -50px;
}

.description {
    position: absolute;
    bottom: -70px;
}

JSFiddle: http://jsfiddle.net/u21ezn9y/2/

Give it a try and let me know if it helps!

Upvotes: 0

maioman
maioman

Reputation: 18734

you could also set some absolute or relative positioning ...

.carousel-arrow{
position: absolute;
top: 50%;
margin-top: -2.5em;//depending on arrow
}

then you set right:10px to right and left:10px to left , this is how carousel arrows are usually set...

Upvotes: 1

Related Questions