Question

任何人都可以帮我弄清楚我做错了什么吗？我想在图像中间的“servicesTitle”中插入文本。

我尝试了位置，顶部，垂直对齐......并且无法弄清楚我做错了什么

<div class="services">
    <p id="titleServices">Our Services</p>

    <div class="servicesImages">
        <div class="servicesImagesLeft">
            <div id="cultureNews">
            <div class="servicesTitle">Culture News</div>
                <img src="/www/assets/newImages/services/190x136/Culture News1.jpg">

            </div>
            <div id="meetingPoint">
            <div class="servicesTitle">Meeting Point</div>
                <img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">

            </div>
        </div>

        <div class="servicesImagesCenter">
            <div id="gallery">
                <img src="/www/assets/newImages/services/460x330/Gallery.jpg">
                <div class="servicesTitleActive">Gallery</div>
            </div>
        </div>

        <div class="servicesImagesRight">
            <div id="profile">
            <div class="servicesTitle">Profile</div>
                <img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">

            </div>
            <div id="invitation">
            <div class="servicesTitle">Invitation
                <img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
            </div>  
            </div>
        </div>

    </div>
</div>

CSS：

html, body {
margin: 0;
padding: 0;
}

#clear {
clear: both;
}

.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}

.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}

.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}

.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}

.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}

.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}

.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}

.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}

.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}

.servicesImagesRight #profile {
width: 100%;
height: 100%;
}

.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}

.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}

.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}

.servicesTitle {
color: #fff;
}

Answer 1

.services p#titleServices {

需要：

.services .servicesTitle {

Answer 2

.servicesTitle {
    color: #fff;
    width: 100%;
    height:100%;
    position: absolute;
    top:60%;
    left:auto;
    z-index:2;
}

http://jsfiddle.net/uHY7C/

在div中的图像中间的文本

2 个答案: