Центрирование изображения внутри div

@GimaS · Регистрация: 11.05.2011

Студворк — интернет-сервис помощи студентам

Необходимо отцентрировать изображение внутри блока.
Ширина изображения устанавливается в размер блока, а по вертикали хочется чтобы картинка равномерно выходила за границы блока.
Я уже как только не пробовал, но картинка не хочет центрироваться по вертикали.
На скрине видно, что она упирается в верхний край блока и не хочет выходить за его границы.
Прошу помощи)

Кусок HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="short_story"> 
 
    <div class="screen"><a href="{full-link}" title="{title}"><dt>{title}</dt><span></span><img src="{image-1}"></a></div> 
 
        <div class="info"><span>{category}</span> {date}</div>
 
            <div class="title"><a href="{full-link}" title="{title}">{title limit="35"}...</a></div>
 
            <div class="line"></div> 
 
        <div class="text">{short-story limit="220"}...</div> 
 
    <a href="{full-link}" class="button">Читать далее</a>  <div class="reads">Просмотров: {views}</div>
 
</div>

CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.short_story {overflow:hidden; width:338px; height:350px; float:left; margin:8px;}
.short_story .screen {overflow:hidden; height:156px; margin:0 0 10px 0;}
.short_story .screen img {max-width: 100%;}
.short_story .screen span {background:url("../images/viewn_news_screen.png") no-repeat 0 0; width:338px; height:156px; position:absolute;}
.short_story .screen span:hover {background:url("../images/viewn_news_screen_h.png") no-repeat 0 0; cursor:pointer;}
.short_story dt {overflow:hidden; background:url("../images/viewn_news_title.png") no-repeat 0 0; max-width:280px; height:30px; line-height:34px; padding:0 10px 0 15px; margin:10px 0 0 20px; position:absolute; color:#fff;}
.short_story .info {overflow:hidden; text-transform:uppercase; padding:0 0 3px 0;}
.short_story .info span {color:#dc9600;}
.short_story .title {text-transform:uppercase; font-size:18px;}
.short_story .title a:hover {color:#dc9600;}
.short_story .line {overflow:hidden; margin:5px 0 20px 0; height:1px; background:#dedede;}
.short_story .text {overflow:hidden; padding:0 0 10px 0;}
.short_story .text img{max-width:100%;} 
.short_story a.button {display:block; float:left; text-decoration:none; height:28px; line-height:32px; background:#2c3436; color:#fff; text-align:center; text-transform:uppercase; padding:0 10px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.short_story a.button:hover {background:#e69e00; text-shadow:1px 1px #9e6d00;}
.short_story .reads {float:left; margin:0 0 0 10px; height:27px; line-height:28px; padding:0 10px 0 12px; background:url("../images/viewn_news_reads.png") no-repeat 0 0;}

@Аццкий Прогер · 28.02.2016, 20:06

Можно картинке задать

CSS
1
position: relative

и с помощью top или bottom двигать ее вверх или вниз

@GimaS · 28.02.2016, 20:28 **[ТС]**

Аццкий Прогер, плохо выходит. Картинки начинают перекрывать заголовок, тот что на темном фоне и еще проблема в том, что все картинки разные по размерам. Они будут прыгать с разными отступами.

Добавлено через 14 минут
С заголовком проблема решается z-index'ом, вся соль именно в этих отступах.

@GimaS · 04.03.2016, 18:59 **[ТС]**

Есть еще какие-либо идеи?

@GimaS · 07.03.2016, 14:38 **[ТС]**

Вот решение, нашел то что нужно:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="short_story"> 
 
    <div class="screen"><div class="vert"><a href="{full-link}" title="{title}"><dt>{title}</dt><span></span><img src="{image-1}"></a></div></div> 
 
        <div class="info"><span>{category}</span> {date}</div>
 
            <div class="title"><a href="{full-link}" title="{title}">{title limit="35"}...</a></div>
 
            <div class="line"></div> 
 
        <div class="text">{short-story limit="220"}...</div> 
 
    <a href="{full-link}" class="button">Читать далее</a>  <div class="reads">Просмотров: {views}</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.short_story {overflow:hidden; width:338px; height:350px; float:left; margin:8px;}
.short_story .screen {overflow:hidden; position: relative; width:338px; height:156px; margin:0 0 10px 0;}
.short_story .screen .inner {height: 500%; width: 100%; position: absolute; top: -200%;} 
.short_story .screen img {max-width:100%; display: block; position: absolute; height: auto; left: 0; top: 0; bottom: 0; right: 0; margin: auto;}
.short_story .screen span {background:url("../images/viewn_news_screen.png") no-repeat 0 0; width:338px; height:156px; position:absolute; z-index:1}
.short_story .screen span:hover {background:url("../images/viewn_news_screen_h.png") no-repeat 0 0; cursor:pointer;}
.short_story dt {overflow:hidden; background:url("../images/viewn_news_title.png") no-repeat 0 0; max-width:280px; height:30px; line-height:34px; padding:0 10px 0 15px; margin:10px 0 0 20px; position:absolute; color:#fff; z-index:2;}
.short_story .info {overflow:hidden; text-transform:uppercase; padding:0 0 3px 0;}
.short_story .info span {color:#dc9600;}
.short_story .title {text-transform:uppercase; font-size:18px;}
.short_story .title a:hover {color:#dc9600;}
.short_story .line {overflow:hidden; margin:5px 0 20px 0; height:1px; background:#dedede;}
.short_story .text {overflow:hidden; padding:0 0 10px 0;}
.short_story .text img{max-width:100%;} 
.short_story a.button {display:block; float:left; text-decoration:none; height:28px; line-height:32px; background:#2c3436; color:#fff; text-align:center; text-transform:uppercase; padding:0 10px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.short_story a.button:hover {background:#e69e00; text-shadow:1px 1px #9e6d00;}
.short_story .reads {float:left; margin:0 0 0 10px; height:27px; line-height:28px; padding:0 10px 0 12px; background:url("../images/viewn_news_reads.png") no-repeat 0 0;}

@Nbot · 07.03.2016, 16:48

к изображению применить css:

CSS
1
position: relative; margin: 0 auto;

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	28.02.2016, 20:28 [ТС]
	Аццкий Прогер, плохо выходит. Картинки начинают перекрывать заголовок, тот что на темном фоне и еще проблема в том, что все картинки разные по размерам. Они будут прыгать с разными отступами. Добавлено через 14 минут С заголовком проблема решается z-index'ом, вся соль именно в этих отступах. 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	04.03.2016, 18:59 [ТС]
	Есть еще какие-либо идеи? 0