标题为

我一些HTML代码工作，但定位绝对股利来到一个问题。这是我们正在尝试做的：标题为

我们将在单行（名单）多张图像，宽度为全角，所以他们会改变关于浏览器的宽度高度。这可以正常工作，但是我们在设置标题时存在问题。我们希望在该图像的中间设置标题，以便它在中间垂直和水平中心。它还需要采取完整的图像高度。

这里是我们有什么什么，我们希望有：

代码：

body { 
    background: #fafafa; 
} 

.wrapper { 
    position: relative; 
    display: block; 
    float: left; 
} 

ul { 
    list-style: none; 
    display: block; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    width: 20%; 
    height: auto; 
    float: left; 
    position: relative; 
} 

img { 
    max-width: 100%; 
    height: auto; 
    float: left; 
} 

.title-wrapper { 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    vertical-align: middle; 
    text-align: center; 
    background: rgba(0,0,0,0.4); 
} 
.title-wrapper a { 
    color: #000; 
    background: #fff; 
    padding: 0 30px; 
    text-decoration: none; 
} 

.wanted-result { 
    width: 100%; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    float: left; 
} 

.get-result { 
    width: 100%; 
    margin-bottom: 30px; 
    float: left; 
} 

<div class="get-result"> 
    This is what get: 
</div> 
<div class="wrapper"> 
    <div class="list-wrapper"> 
     <ul> 
      <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /></li> 
      <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /></li> 
      <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /></li> 
      <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /></li> 
      <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /></li> 

     </ul> 
    </div> 
    <div class="title-wrapper"> 
     <a href="#">Title</a> 
    </div> 
</div> 
<div class="wanted-result"> 
    This is what we want to get: 
</div> 
<img src="http://s12.postimg.org/ibhy38epp/birds.jpg" />

谢谢！

来源

2015-02-09 Mimi

你怎么想，如果在CSS的'.title伪-wrapper'类有一个'宽度：20％;左：40％;'和线高度等于图像高度，在这种情况下约为130px。你可以相应地使其动态化。 – 2015-02-09 11:11:40

感谢您的回答。但我不希望更换中间的列表项，我可能有他们的10例如，我只想把标题在他们之上，那就是在列表的中间，它需要有关inputed文本的宽度。例如，它可能会超过一半的列表项。 – Mimi 2015-02-09 11:20:56

您可以像后正确的地方a标签内li和文本换行到span：

 <li><img src="http://s5.favim.com/orig/52/winter-nature-small-canon-eos-7d-Favim.com-474348.jpg" /> 
      <a href=""><span>Title</span></a> 
     </li>

添加下一个CSS：

.list-wrapper li > a { 
    display: block; 
    position: absolute; 
    background-color: #cccccc; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
} 

.list-wrapper li > a > span { 
    display: block; 
    position: absolute; 
    top: 42%; 
    width: 100%; 
}

你可以看到实施this fiddle

来源

2015-02-09 11:11:40

感谢您的回答。但我不希望更换中间的列表项，我可能有他们的10例如，我只想把标题在他们之上，那就是在列表的中间，它需要的宽度regaring inputed文本。例如，它可能会超过一半的列表项。 – Mimi 2015-02-09 11:20:23

这是如果试图覆盖动态大小的图像几乎是不可能的，没有某种结束一圈。根据文字的大小，对文字使用相对位置并将其从顶部调整为45-50％，然后使用vw尽可能地掩盖图像。

.title-wrapper a { 
    position: relative; 
    top: 46%; 
    color: #000; 
    background: #fff; 
    padding: 6.8vw 9vw; 
    text-decoration: none; 
}

来源

2015-02-09 11:29:54 Waffles

把style财产<a>

<a style="text-align: center; left: 50%; background-color: white; padding: 65px 0px 0px; position: absolute; width: 10%; height: 49%;" href="#">Title</a>

试试这个，它会工作，你会得到你想要的东西。如果你想和高度玩和宽度操纵height和width财产。

来源

2015-02-09 13:22:06 PJ1405

回答

相关问题