Я хотів би вертикально вирівняти текст і зображення в поле CSS.
Я спробував кілька методів, ось код для останнього, який я намагався називати "display: table-cell-method"
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="/images/images/stopwatch-button-play.png">
</div>
Ось знімок екрана результату в новітній версії Firefox: http://screencast.com/t/Yzg2MzAzNW
Зображення правильно сфокусоване, текст майже в центрі. Він сидить на базовому рівні зображення. Чому?
Відповіді:
3 для відповіді № 1змінити наступне
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="/images/images/stopwatch-button-play.png">
</div>
4 для відповіді № 2
вертикальне вирівнювання грунтовно неправильно зрозуміло. Чи читали ви це?
як щодо того, чому текстові сайти в базовому сценарії зображення, це тому, що зображення і текст обидва в потоці div. вони не перекриваються. мати текст, в центрі якого теж (це означає, що воно лежить над зображення), вам доведеться помістити текст в a div або a span і налаштуйте його позиціонування (встановіть його відносно та експериментуйте зліва та зверху).
Підбадьорює
0 для відповіді № 3
Ви можете використовувати властивість фонового положення.
це виглядає так.
фон: url (path / to / image.whatever) зверху; // вирівнює його зверху.
ви навіть можете зробити щось подібне top left або top right тощо.
w3schools має все, що потрібно знати про фони.
0 для відповіді № 4
Якщо ваш текст має лише один рядок, ви можете встановити йоговисота лінії до висоти зображення. Він буде центрувати текст вертикально. Тоді позиція: абсолютна на вашому образі не дозволить йому турбувати позиціонування тексту в div:
<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="/images/images/stopwatch-button-play.png"></div>
</div>