使文本在响应式图像中保持在同一位置

Question

我正在尝试使图像上的文本叠加层保持对图像的响应，以便它们位于图像框中的中心，但我无法使其保持在图像宽度内。

我做了一个小提琴，http://jsfiddle.net/m9tEd/

我正在努力实现的目标的图片：

<div id="gallery">
<ul>
    <li>
        <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         
        </div>
    </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

            </div> 
        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

            </div> 
        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

            </div>
        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

        </li>
        <li>
            <div class="gallery-image"> 
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"/>
        <p class="gallery-desc">Upper line</p><br>
        <p class="line-separator-four"></p>
        <p class="gallery-desc-bottom">Bottom</p></a>         

        </li>
     </ul>
    </div>


enter code here

Answer 1

呃……我猜我太慢了。尽管有 3 行 3 个 .gallery-image div 和文本列表，但我的做法与 daniel 有点不同

jsFiddle

HTML：

<div class="gallery">
    <div class="gallery-image">
        <a href=""><img src="http://lorempixel.com/output/fashion-q-c-320-210-9.jpg" />
            <ul>
                <li class="gallery-desc">Upper line</li>
                <li class="line-separator-four"></li>
                <li class="gallery-desc-bottom">Bottom</li>
            </ul>
        </a> 
    </div>

CSS：

.gallery {
    width:100%;
    margin-top:45px;
    -webkit-transform: translateZ(0);
}
.gallery-image {
    position: relative;
    float: left;
    display:inline-block;
    width: 32%;
    margin-left: 2%;
    font-size:1.5em;
    font-family:'avenir';
    text-align:center;
}
.gallery-image:first-child {
    margin-left:0;
}
.gallery-image a {
    color:#fff;
}
.gallery-image a:hover {
    color:#FF8000;
}
.gallery-image a:hover ul li.line-separator-four {
    background: #FF8000;
    border-bottom: 1px solid #FF8000;
}
.gallery-image img {
    position: relative;
    z-index:1;
    width: 100%;
}
.gallery-image ul {
    position: absolute;
    top:15%;
    width:100%;
    margin:0 auto;
    z-index:10;
    list-style:none;
    padding:0;
}
.gallery-image li {
    margin-bottom:10%;
}
.line-separator-four {
    display:block;
    width: 50%;
    margin-left: 25%;
    height: 1px;
    background: #F5F5F5;
    border-bottom: 1px solid #F5F5F5;
}

Answer 2

我想这就是你要找的东西：

CSS

#gallery {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 45px;
    position: relative;
    -webkit-transform: translateZ(0);
}

#gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#gallery ul li {
    overflow: hidden;
    width: 30%;
    margin: 1.66%;
    float: left;
}

#gallery li a {
    position: relative;
    display: block;
}

#gallery ul p {
    z-index: 2;
    font-size: 1.5em;
    font-family: 'avenir';
    margin: 0;
}

#gallery ul a {
    color: #fff;
}

#gallery li a:hover {
    color: #FF8000;
}

#gallery ul img {
    position: relative;
    z-index: 1;
    width: 100%;
}

.gallery-desc {
    left: 8%;
}

.line-separator-four {
    width: 50%;
    margin: 0 auto;
    height: 1px;
    background: #F5F5F5;
    border-bottom: 1px solid #F5F5F5;
    display: inline-block;
}

.caption {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.caption_content {
    display: inline-block;
    vertical-align: middle;
}

HTML

<div id="gallery">
    <ul>
        <li>
            <div class="gallery-image">
                <a href="#"><img src=
                "http://lorempixel.com/output/fashion-q-c-320-210-9.jpg"></a>

                <div class="caption">
                    <div class="caption_content">
                        <p class="gallery-desc">Upper line</p>

                        <p class="line-separator-four"></p>

                        <p class="gallery-desc-bottom">Bottom</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

jsFiddle demo.