Не получаеся выровнять текст по центру

голоса: 0

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

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

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

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

| Автор: | Категория: Дизайн сайта

Ответов: 2

Голоса: +1
 
Лучший ответ

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

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

| Автор:
Выбор ответа лучшим | | Автор: Катя

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

Катя,

ну вставь их вниз, они наверно у тебя между <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>

Спасибо за помощь, Владимир!
голоса: 0
Здесь в ксс удалите 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;
}
| Автор:

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

.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$.

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

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

...