Форум Сайтостроение Веб-строительство

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

T1
На сайте с 10.07.2012
Offline
115
Trader1985
6405

Люди добрые, помогите чайнику! В общем, нужно выровнять картинку по центру посредством CSS. Есть такой код:




<html>
<head>
<title>Выравнивание фотографии по центру</title>

<style>
.img-center {
text-align: center;
}
</style>


</head>
<body>

<div class="img-center">
<p>Текст до изображения</p>
<img src="http://htmlbook.ru/sites/default/files/images/faq/74_1.jpg" alt="Фотография">
<p>Текст после изображения</p>
</div>

</body>
</html>


Подключаю CSS к блоку div – картинка выравнивается вместе с текстом, а надо, чтобы текст на месте был, а только картинка центрировалась.

Вопрос: что надо прописать в CSS, чтобы только картинка центрировалась, а текст на месте оставался?

TF-Studio
На сайте с 17.08.2010
Offline
334
TF-Studio
#1

.img-center img {

text-align: center;

}

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
yuz_ik
На сайте с 22.10.2009
Offline
33
yuz_ik
#2 

<html>

 <head>

 <title>Выравнивание фотографии по центру</title>



 </head>

 <body>



 <div>

 <p>Текст до изображения</p>

 <p style="text-align: center;"><img src="http://htmlbook.ru/sites/default/files/images/faq/74_1.jpg" alt="Фотография"></p>

 <p>Текст после изображения</p>

 </div>



 </body>

 </html>

Вот так и без классов.

Trader1985:
Люди добрые, помогите чайнику! В общем, нужно выровнять картинку по центру посредством CSS. Есть такой код:


Подключаю CSS к блоку div – картинка выравнивается вместе с текстом, а надо, чтобы текст на месте был, а только картинка центрировалась.
Вопрос: что надо прописать в CSS, чтобы только картинка центрировалась, а текст на месте оставался?



---------- Добавлено 23.07.2013 в 12:45 ----------

TF-Studio:
.img-center img {
text-align: center;
}

Что ж вы центрируете внутри картинки? Мне кажется это неверно, может я не прав?

T1
На сайте с 10.07.2012
Offline
115
Trader1985
#3
.img-center img {
text-align: center;
}

Что-то не получилось... Мож. я конечно криворукий )) Но это практически тоже самое что и у меня

yuz_ik не, мне надо чтобы всегда центрировалась, для DLE движка. Чтобы типа новость, а в ней картинка по центру. Надо в отдельный файл CSS всё сохранять.

В сети появились первые В Яндекс.Дискe для iOS Google показывает три актуальных
TF-Studio
На сайте с 17.08.2010
Offline
334
TF-Studio
#4
<style>
.img-center {
text-align: center;
}
</style>
<p>Текст до изображения</p>
<div class="img-center">
<img src="http://htmlbook.ru/sites/default/files/images/faq/74_1.jpg" alt="Фотография">
</div>
<p>Текст после изображения</p>

Так правильнее, поспешил немного

LV
На сайте с 23.07.2013
Offline
0
LenaV
#5

попробуйте так

.img-center img{

display:block;

margin:0 auto;

}

T1
На сайте с 10.07.2012
Offline
115
Trader1985
#6
TF-Studio:
Так правильнее, поспешил немного

Мне надо чтобы и текст и картинка в одном блоке были.

Есть DLE движок, там новости выводятся одной переменной – надо её обернуть DIV-вом, так, чтобы картинка по центру а текст нет

---------- Добавлено 23.07.2013 в 14:47 ----------

LenaV:
попробуйте так
.img-center img{
display:block;
margin:0 auto;
}

Отлично, то что нужно! ☝

Спасибо Вам большое, уважаемая(ый) Лена В

В Директе появились текстово-графические Возможности для брендинга в Яндекс.Браузер теперь умеет переводить

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий