Картинки в wordpress

Очень часто при вставке картинок в wordpress возникает ситуация, когда хочется сделать обтекание картинки текстом.
Но когда выбираешь положение картинки слева (справа) текст отображается по нижней границе.
Связано это с тем , что при таком выборе wordpress добавляет стили отображения картинки

.aligncenter
.alignleft
.alignright
.wp-caption

Но многие авторы тем это не учитывают в стандартных таблицах стилей.
Откройте Ваш style.css и посмотрите есть ли описание этих классов.
Скорее всего — нет.
Для красивого отображения заменяем или дополняем таблицу стилей следующими классами:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Теперь картинка должна смотреться так, как Вы и задумывали.
Если не хотите каждый раз делать отступ можно сразу прописать по 5 px:

.alignleft {
float: left;
margin-right: 5px;
}
.alignright {
float: right;
margin-left: 5px;
}

Вот и все премудрости.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Изображения должны быть включены!