Question

Здравствуйте.

Хочу выровнять текст и изображение по центру, но ничего не выходит. В Визуальном редакторе все работает корректно, но после нажатия кнопки Сохранить, он почему-то все равно прижимается к левому краю.

Как видно на сриншотах, после Сохранения выравния не происходит. Ни текст, ни изображение выравниваться почему-то не хотят. Хотя в Предпросмотре все нормально отображается. Изображение я загружаю через Файловый менеджер.

Помогите решить проблему.

Answer 1

Пропиши в CSS вот такой код:

div[align="center"] {margin:0 25% 0 25%; width:50%;}

Comments

а текст вот так по центру:

.MsoNormal { text-align: center;}

p.s. а вообще не советую использовать визуальный редактор он все время глючит, используй bb коды... 

---

Этот код уменьшил почему-то размер изображения, хотя уменьшать его не надо, и по центру текст не выровнял.

---

Катя,

попробуй на странице: "Страница материала и комментариев к нему каталога файлов" обернуть $MESSAGE$ тегами center, вот так:

<center>$MESSAGE$</center>

 

или в css прописать:

.MsoNormal { text-align: center;} .eText img {margin-left:120px !important;}

у тебя где-то кнфликт, а где не пойму(

---

Вовчик,

так понял, текст у тебя по левому краю стоит а не по центру потому что у тебя тег <p> в css прописывает текст по ширине

p {text-align: justify;padding: 3px 0px;margin: 0px;}

 а если ты поставишь text-align: center; то текст будет по центру. А если вообще удалишь  text-align: center;, то текст будет принимать те значения, которые ты прописываешь в визуальном редакторе

---

Прошу прощения за долгое молчание (свет отключали на 3 часа). Что-то не могу найти в CSS данную строчку. Не подскажите, где искать p {text-align: justify;padding: 3px 0px;margin: 0px;}?

---

Пробую искать данную строчку p {text-align: justify;padding: 3px 0px;margin: 0px;} через поиск, но пишет, что данная фраза не найдена.

---

Господи, я искала данную строчку в CSS, а она оказывается находится на Странице материалов и комментариев в нему.

---

Катя,

эта строчка не в css прописана, а прям в html, вот тут:

<style type="text/css">
/* Все стили можно менять */
.oculus-prog-title {font-family: Arial, Helvetica, sans-serif;font-size: 16px;line-height: 25px;margin-bottom: 10px;font-weight: bold}
.oculus-prog-text {font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin-bottom: 5px;}
.oculus-prog-img {width: 45px;margin: 0px 10px 10px 0px;float: left;display: block;}
.oculus-prog-zod {font-weight: bold;}
p {text-align: justify;padding: 3px 0px;margin: 0px;}
</style> 

---

Я удалила justify, текст стал по центру, а вот картинка все равно не хочет по центру становится. Как это исправить?

 

---

Катя,

И вот тут в css 

.eText img {float:left;margin:5px 20px 5px 0!important;max-width: 100%;}

удали float:left; 

---

Не помогает этот способ, после удаления float:left начинают скакать изображения, которые загружены на сайте через $IMAGE1$

Было так

А стало так (картинка сама вниз опустилась)

---

Катя,

А в чем проблем прописать другой класс в полном описании матеиала!?

берешь это

<tr><td class="eText" colspan="2">$MESSAGE$</td></tr>

и меняешь на

<tr><td class="eText2" colspan="2">$MESSAGE$</td></tr>

и в css прописываешь 

.eText2 img {margin:5px 20px 5px 0!important;max-width: 100%;}

---

Вовчик,

или вот так сделат

берешь это

<tr><td class="eText" colspan="2">$MESSAGE$</td></tr>

и меняешь на

<tr><td class="eText"  style="float:none !important;" colspan="2">$MESSAGE$</td></tr>

---

Что-то я запуталась, этот ваш совет к чему относится, к $IMAGE1$, которые стали гулять по сайту? Или же к той картинке, о которой речь шла в .eText img {float:left;margin:5px 20px 5px 0!important;max-width: 100%;} и которую мне нужно было выровнять по центру? Потому что $IMAGE1$ находятся в Каталоге Статей, а картинка, которую нужно по центру поставить - в Каталоге Файлов

Не пойму, в каком модуле менять надо?

---

Катя,

Короче, заходи:

Панель управоления ---> Управление дизайном ---> Каталог файлов ---> Страница материала и комментариев к нему найди строчку:

<tr><td class="eText" colspan="2">$MESSAGE$</td></tr>

И замени её на 

<tr><td class="eText" style="margin:0;padding:20px!important;line-height:150%;" colspan="2">$MESSAGE$</td></tr><style>.eText img {float:none !important; margin:5px 20px 5px 0!important;max-width: 100%;}</style>

---

Только после этого кнопки соц.сетей убегают наверх, а они должны быть внизу

---

Катя,

ну вставь их вниз, они наверно у тебя между <tr><td class="eText" colspan="2">$MESSAGE$ ТУТ НАВЕРНО КНОПКИ БЫЛИ</td></tr> находились

---

Да, кнопки находятся тут где вы написали, чтобы они отображались именно в самом материала, в конце его, а не за пределами его.

А куда я их по вашему должна поставить?

---

Катя,

ну так попробуй:

<tr><td class="eText" style="margin:0;padding:20px!important;line-height:150%;" colspan="2">$MESSAGE$ <div style="float:left;">ТУТ  КНОПКИ </div></td></tr><style>.eText img {float:none !important; margin:5px 20px 5px 0!important;max-width: 100%;}</style>

---

Спасибо за помощь, Владимир!

Answer 2

Здесь в ксс удалите margin и float

.eText img {
float: left;
margin: 5px 20px 5px 0px !important;
max-width: 100%;
}

Здесь допишите text-align, пример ниже.
.eBlock div:first-child {
position: relative;
text-align: center;
z-index: 2;
}

Comments

Я не могу удалить строчку

.eText img {
float: left;
margin: 5px 20px 5px 0px !important;
max-width: 100%;
}

Иначе у меня тогда не будет выравниваться $IMAGE1$ (подробне писала об этом в вопросах тут) И мне посоветовали админы добавить вот эти 2 срочки. Если я их удалю, тогда другие изображения не будут выравниваться.

.eText img {float:left;margin:5px 20px 5px 0!important;max-width: 100%;}
.eMessage img{display: block;margin: auto!important;max-width: 100%;}

---

Катя,

Я уже не помню какая у вас была проблема там, как выход сделайте так
Этот код поместите в самый вверх шаблона "Страница и комментарии к нему" модуля "каталог файлов"
<style>
.eText img {
 max-width: 100%;
 }
.eBlock div:first-child {
 position: relative;
 text-align: center !important;
 z-index: 2;
 }
</style>

---

Поместила куда сказали, в самый верх перед html, но не помогло

<style>
.eText img {
 max-width: 100%;
 }
.eBlock div:first-child {
 position: relative;
 text-align: center !important;
 z-index: 2;
 }
</style>
<html>
<head>

---

Катя,

Не надо перед html, поместите после <body>

---

Пробовала после <body> ставить, не помогает. Видимо, надо все-таки в CSS это дело делать.

---

Если делать все так, как вы сказали в CSS

Здесь в ксс удалите margin и float

.eText img {
float: left;
margin: 5px 20px 5px 0px !important;
max-width: 100%;
}

Здесь допишите text-align, пример ниже.
.eBlock div:first-child {
position: relative;
text-align: center;
z-index: 2;
}

То в этом случае начинает "гулять" картинки, которые загружены через $IMAGE1$.

Было вот как (было правильно)

Стало вот так - неправильно (картинка вниз уходит, а этого быть не должно).