Как получить текст по вертикали на изображении? Я уже установил, как это должно выглядеть, но я не могу заставить текст сосредоточиться на каждом изображении, потому что у них разные высоты.
Я уже пробовал использовать свойство "top" и вертикальное выравнивание и методы, упомянутые в других вопросах, но, похоже, для этой ситуации ничего не работает.
В любом случае это может быть достигнуто?
JSfiddle можно найти здесь: http://jsfiddle.net/Sf3RX/2/
HTML
<div class="column">
<div class="image">
<img src="/">
<p class="info">cats
<br><span>#Photography</span>
</p>
</div>
CSS
.image {
position: relative;
width: 25%;
text-align: center;
}
img {
width: 100%;
}
p.info {
position: absolute;
width: 100%;
z-index: 10;
top: 25%;
}
Если вы хотите достичь этого результата: http://jsfiddle.net/paulalexandru/MSfPs/ все, что вам нужно сделать, это:
Настройте свой css следующим образом:
p.info {
position: absolute;
width: 100%;
z-index: 10;
top: 25%;
margin: 0;
padding: 0;
}
И добавьте этот код javascript также:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(".image").each(function() {
var height_image = $(this).find('img').height();
var height_p = $(this).find('p.info').height();
var rest = height_image - height_p;
$(this).find('p.info').css('top', rest/2);
});
});
</script>
Код javascript вычисляет свойство css top для каждого <p>
чтобы они находились в середине блока.
Еще одно чистое решение css - немного изменить ваш HTML-код, вам нужно добавить высоту стола 100%/ширину 100% и установить выравнивание по вертикали: посередине на <td>
и внутри него вы должны поместить абзац.
<style>
body{
padding: 0;
margin: 0;
margin:0px auto;
}
#main{
position: relative;
width:500px;
height:500px;
}
#abc{
text-align:center;
background-color:#0F0;
height:250px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
</style>
<div id="main">
<div id="abc">
<span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>
</div>
</div>
Вы можете установить line-height
до 100%, что сделает линию той же высоты, что и ваше изображение, вертикально центрируя ее.
Попробуйте line-height
или top:50%;margin-top:/ / -the height of the Textblock