Выравнивание изображения по центру

Выравнивание изображения по центру

Опции

smaant

Topic Starter сообщение

11.6.2011, 20:02; Ответить: smaant

Сообщение #1

0

Группа: User
Сообщений: 17
Регистрация: 11.6.2011
Поблагодарили: 0 раз
Репутация:

0

Пытаюсь решить следующую задачу: нужно сделать изображение с подписью, обтекаемые текстом, при этом изображение должно масштабировать в зависимости от размера окна.
В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру..

Как это можно исправить?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css">
#outerTD {
border: 2px dotted blue;
text-align: center;
height: 100%;
}

#outerDIV {
border: 2px solid red;
position: relative;
height: 100%
}

img {
height: 100%;
position: absolute;
}
</style>
</head>

<body style="text-align: justify;" height="100%">

<table style="float:left;text-align:center;margin:10px;width:300px;height:90%">
<tr>
<td id="outerTD">

<div id="outerDIV">

<img src='http://iphonewallpapersx.com/wp-content/uploads/2010/07/iphone_3g_black.jpg' />

</div>

</td></tr>
<tr>
<td style="border:2px dotted green">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus.</small>
</td>
</tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet sem nec justo fringilla quis congue massa tincidunt. Sed quis ligula nunc. Nullam fermentum odio at lacus malesuada non tincidunt libero lobortis. Curabitur sagittis fringilla ligula, eu volutpat felis dignissim eu. Aenean tempor tortor non lacus iaculis interdum. Donec posuere ullamcorper vestibulum. Aenean sed tortor lorem. Nam sed lectus sit amet lacus lacinia mollis in nec sem. Sed nulla leo, consectetur in volutpat ut, vulputate eu nibh. Pellentesque volutpat, mauris sit amet scelerisque mollis, purus velit volutpat massa, non ultricies arcu sapien vel urna.</p>

<p>Morbi et quam ante. In vel orci eget ipsum lacinia ultricies. Aenean nec ornare eros. Morbi lobortis euismod dolor, a rutrum lorem blandit ut. Aliquam erat volutpat. Nam accumsan tortor dictum turpis bibendum eu blandit odio pulvinar. Phasellus nisi leo, ultricies a gravida nec, scelerisque ut ligula. Sed a metus dolor, eu consectetur elit. Maecenas ornare pretium suscipit. In nibh sem, malesuada in rhoncus nec, condimentum fermentum nunc. Duis non nulla at enim convallis tincidunt. Vivamus ullamcorper iaculis eleifend. Pellentesque eros odio, tincidunt ac molestie ut, egestas interdum nisl. Etiam vel ante nec odio scelerisque suscipit. Nulla id ullamcorper dui. Duis dignissim convallis ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac eros lorem, in fermentum tellus.</p>

<p>Proin adipiscing, erat eget porttitor blandit, nulla lectus lobortis felis, ac cursus turpis est at lacus. Aliquam congue ante vitae diam egestas luctus. Phasellus nulla magna, sollicitudin non pulvinar sed, elementum nec libero. Vivamus viverra vehicula tellus sit amet interdum. Donec non urna a sapien aliquam ultrices eget pretium velit. Fusce pellentesque condimentum semper. Integer laoreet accumsan urna placerat lacinia. Quisque blandit felis luctus neque aliquet suscipit. Mauris nec risus sit amet magna pulvinar iaculis. Aliquam in turpis massa. Mauris molestie euismod nisl id interdum.</p>

<p>In dignissim magna et massa facilisis sit amet varius risus posuere. Donec dapibus, dui non aliquam viverra, dui justo dignissim elit, ut viverra nisl magna a tortor. Morbi mattis, tellus et venenatis iaculis, erat libero commodo nunc, ac lacinia erat dui in nisi. Duis eget massa nec metus hendrerit dictum sed a nibh. Ut vitae sapien vitae nulla gravida lobortis quis non dolor. Pellentesque auctor feugiat vehicula. Nam sed risus porta sem semper imperdiet sed rutrum turpis. Donec dolor urna, laoreet sed iaculis vel, convallis at nulla. Sed tincidunt luctus neque sit amet consectetur. Donec et nulla purus. </p>
</body>

</html>

0

Ответить с цитированием данного сообщения

Ответов (1 - 9)

ValianT ValianT 12.6.2011, 1:16; Сообщений: 98 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	12.6.2011, 1:16; Ответить: ValianT Сообщение #2
0 Группа: User Сообщений: 98 Регистрация: 3.6.2011 Поблагодарили: 0 раз Репутация: 0	Что-то не до конца понятное. Зачем релатив,зачем абсолют? Нужно чтобы картинка растягивалась под окошко,задавайте ей размер в % Картинка с подписью? Ну оберните в див с флоатом. А остальное зачем?

smaant Topic Starter smaantTopic Starter 12.6.2011, 1:27; Сообщений: 17 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 12.6.2011, 1:27; Ответить: smaant Сообщение #3
0 Группа: User Сообщений: 17 Регистрация: 11.6.2011 Поблагодарили: 0 раз Репутация: 0	Да, вы правы, недостаточно точно описал - нужно чтобы картинка + подпись занимали не больше определенного размера экрана (в данном примере 90% высоты), т.к. картинки могут быть разного размера, то задать их высоту просто в процентах не вариант. Если есть вариант сделать это проще - буду рад :)

ValianT ValianT 12.6.2011, 11:22; Сообщений: 98 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	12.6.2011, 11:22; Ответить: ValianT Сообщение #4
0 Группа: User Сообщений: 98 Регистрация: 3.6.2011 Поблагодарили: 0 раз Репутация: 0	Те вам нужно обрезать картинку,если она будет занимать место, больше определённого? В вашем примере она обрезаться не будет. Поместите её в div, на него поставить максимально возможные значения высоты/ширины и overflow:hidden подпись можно получить обернув эту конструкцию в ещё 1 див,для удерживания текста подписи всегда под картинкой

smaant Topic Starter smaantTopic Starter 12.6.2011, 11:53; Сообщений: 17 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 12.6.2011, 11:53; Ответить: smaant Сообщение #5
0 Группа: User Сообщений: 17 Регистрация: 11.6.2011 Поблагодарили: 0 раз Репутация: 0	(ValianT @ 12.6.2011, 14:22) Те вам нужно обрезать картинку,если она будет занимать место, больше определённого? Нет :) (smaant @ 11.6.2011, 23:02) ... нужно сделать изображение с подписью, обтекаемые текстом, при этом изображение должно масштабировать в зависимости от размера окна. В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру..

ValianT ValianT 13.6.2011, 10:29; Сообщений: 98 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	13.6.2011, 10:29; Ответить: ValianT Сообщение #6
0 Группа: User Сообщений: 98 Регистрация: 3.6.2011 Поблагодарили: 0 раз Репутация: 0	Ладно,пойдём от противного) У вас на img стоит абсолют. Ничто вам не мешает его выровнять с помощью отрицательного margin слева например.

smaant Topic Starter smaantTopic Starter 13.6.2011, 22:56; Сообщений: 17 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 13.6.2011, 22:56; Ответить: smaant Сообщение #7
0 Группа: User Сообщений: 17 Регистрация: 11.6.2011 Поблагодарили: 0 раз Репутация: 0	А можно работающий пример? Это будет универсальное решение? Т.е. для картинки другого размера не придется вручную подбирать значение margin?

ValianT ValianT 14.6.2011, 12:38; Сообщений: 98 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	14.6.2011, 12:38; Ответить: ValianT Сообщение #8
0 Группа: User Сообщений: 98 Регистрация: 3.6.2011 Поблагодарили: 0 раз Репутация: 0	Сразу оговорюсь что не до конца понимаю вашу необходимость в подобных изварщениях,но если вернуться к конкретике-да. на картинку ставим margin-left:-50% и она всегда будет визуально начинаться слева.

smaant Topic Starter smaantTopic Starter 17.6.2011, 0:03; Сообщений: 17 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 17.6.2011, 0:03; Ответить: smaant Сообщение #9
0 Группа: User Сообщений: 17 Регистрация: 11.6.2011 Поблагодарили: 0 раз Репутация: 0	ValianT, простите, но я не знаю как еще объяснить.. (smaant @ 11.6.2011, 23:02) В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру.. Коллеги, есть еще идеи как решить подобную задачу?

vasvas7775 vasvas7775 17.6.2011, 12:38; Сообщений: 354 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	17.6.2011, 12:38; Ответить: vasvas7775 Сообщение #10
0 Группа: User Сообщений: 354 Регистрация: 12.11.2010 Поблагодарили: 0 раз Репутация: 0	Если я правильно понял, можно попробовать так: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin:0px auto;} #block { width:800px; height:500px; background:red; margin-left:auto; margin-right:auto; margin-top:10px; padding:5px;} #block1 { width:300px; height:300px; background:#33CC00; border:solid 1px; margin-right:5px; float:left;} img { width:100%; height:100%;} </style> </head> <body> <div id="block"> <div id="block1"><img src="C:/Documents and Settings/All Users/Документы/Мои рисунки/Образцы рисунков/Зима.jpg"/></div> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div> </body> </html>

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Выравнивание картинки по центру между текстом	10	NikN	2637	6.1.2021, 23:24 автор: buypushplatform
Выравнивание содержимого footer'a	0	press74	4991	2.7.2019, 18:58 автор: -iiwanc-
Изображения с shutterstock от 15 рублей/штука	5	Mr_Big	3669	10.9.2017, 21:30 автор: Palundra
Вывод изображения при наведения на часть картинки по area	1	androv77	4833	16.7.2016, 17:32 автор: -YroKPROG-
Создаю фрактальные изображения для разных целей	22	Russ33	5072	27.6.2016, 21:42 автор: Russ33