Нет правильного способа сделать это в CSS (хотя должен быть). Но вот метод, который работает для меня.
CSS:
#image1, #image1-text, #image1-container {
overflow: hidden;
height: 100px;
width: 100px;
}
#image1 {
top: -100px;
position: relative;
z-index: -1;
}
#image1-text {
text-align: center;
vertical-align: middle;
display: table-cell;
}
HTML:
<div id="image1-container">
<img src="image.jpeg" id="image1">
<div id="image1-text">
hello
</div>
</div>
Порядок image1 и image1-text в контейнере не имеет значения.
Это что-то вроде хака, но оно работает где угодно, не только в таблице. Однако он не работает должным образом в IE. Вместо этого он будет отображаться сверху. Но это работает в FF, Safari и Chrome. Не проверялось в IE8.
Хак для IE7 или менее, который будет показывать только 1 строку, но он будет центрирован, добавит следующее внутри тега <head>:
<!--[if lte IE 7]>
<style>
#image1-text {
line-height: 100px;
}
</style>
<![endif]-->