Перейти к содержимому



Картинка по центру

#1 Вито_052
Вито_052
  • Пользователь
  • 10 сообщений
  • Репутация: 0
0

Отправлено 04 Сентябрь 2019 - 12:48

Ребята выручайте, уже весь мозг сломал, не могу тупо выровнять картинку по центру. вот сайт https://data-vykhoda.ru/ уже пробовал вставлять в тег p и писать text-align  и пробовал

 

 

display:flex;

align-items: center;
justify-content: center;
float: none;
 
Она стоит на месте, подвинуть её можно через margin, но я хочу чтобы она стояла чисто по центру, на разных устройствах, будь-то планшет или телефон. Выручайте, в чем причина, и почему эта картинка не стает по центру.

 

 

  • 0

#2 Андрей WPM
Андрей WPM
  • Модератор
  • 890 сообщений
  • Репутация: 123

Отправлено 04 Сентябрь 2019 - 13:17

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

 

По сабжу:

Попробуйте картинке дать свойство блока и выровнить с помощью марджина

img{
display:block;
margin:0 auto;
}

  • 0


#3 Вито_052
Вито_052
    Topic Starter
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 04 Сентябрь 2019 - 13:32

@Андрей WPM,  Да извините, забыл про защиту, Я уже так пробовал, сейчас опять прописал ваш вариант, без изменений))


  • 0

#4 Artos
Artos
  • Пользователь
  • 105 сообщений
  • Репутация: 12

Отправлено 04 Сентябрь 2019 - 13:45

@Вито_052, там для картинок установлено правило float: left;.

Надо его удалить или "перебить" правилом float: none;

Может потребоваться добавить ещё !important


  • 1

#5 Андрей WPM
Андрей WPM
  • Модератор
  • 890 сообщений
  • Репутация: 123

Отправлено 04 Сентябрь 2019 - 13:52

@Вито_052, просто обращаться нужно к правильному элементу. В вашем случае, это к диву с классом entry

 

Сохраненное изображение 2019-9-4_16-50-16.72.jpg


  • 0


#6 Вито_052
Вито_052
    Topic Starter
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 04 Сентябрь 2019 - 14:01

@Artos, помогло спасибо, только теперь другая проблема ссылка не только на картинке но и вокруг неё, как это поправить? 

@Андрей WPM,  Спасибо за подсказки) Я просто пробовал разные варианты, наверное div тоже хотел поставить по центру)) под конец мозги начали плавится. а нужно было всего лишь убрать float left, на картинке))


Сообщение отредактировал Вито_052: 04 Сентябрь 2019 - 14:01

  • 0

#7 Андрей WPM
Андрей WPM
  • Модератор
  • 890 сообщений
  • Репутация: 123

Отправлено 04 Сентябрь 2019 - 15:29

@Вито_052, да главное заработало, остальное лирика.  :)


  • 0


#8 Вито_052
Вито_052
    Topic Starter
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 04 Сентябрь 2019 - 16:01

@Андрей WPM, это да)) Тем более я нашел выход из положения, накинул background на всю зону где работает ссылка)

Прикрепленные изображения

  • 345483.png

  • 0

#9 Андрей WPM
Андрей WPM
  • Модератор
  • 890 сообщений
  • Репутация: 123

Отправлено 04 Сентябрь 2019 - 16:16

@Вито_052, ну это уже дело вкуса.  :)

 

Оффтопик


  • 1


#10 Вито_052
Вито_052
    Topic Starter
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 04 Сентябрь 2019 - 18:38

Если есть идеи по дизайну, всегда готов выслушать))


  • 0

#11 Андрей WPM
Андрей WPM
  • Модератор
  • 890 сообщений
  • Репутация: 123

Отправлено 04 Сентябрь 2019 - 20:25

@Вито_052, как я уже успел заметить, то что меня отпугивает в дизайне, может очень нравиться другим. По этому тут уже на ваше усмотрение.  :D


  • 0


#12 Rodiola
Rodiola
  • Пользователь
  • 522 сообщений
  • Репутация: 40

Отправлено 05 Сентябрь 2019 - 09:43

@Вито_052,

Если есть идеи по дизайну, всегда готов выслушать))

  Правильно, здесь дело вкуса. Что нравится одному, может категорически не нравиться другому. Особых идей не выскажу, но предложу вариант по поводу цвета этого Вашего "бэкграунда". Сейчас он у Вас оттенком нечто среднее между сиреневым и синим (типа персидский синий или что-то вроде того). Этот цвет выбивается из общей картины, он ни с чем не сочетается. Разве что с заголовком раздела, но этого мало. Попробуйте несколько вариантов оттенков, может, Вам другие варианты больше понравятся. Фон за картинкой можно сделать в тон шапки (оттенок берлинская лазурь или близко к нему).

 

1.JPG

Будет сочетаться, хотя будет выглядеть темновато (как по мне, но многим нравится именно темное исполнение).

 

Второй вариант. Если можно сделать фон за картинкой таким же, как фон сайта, то можно так попробовать.

2.JPG

Хотя опять же может получиться слишком "аляписто". Но надо посмотреть.

Более привлекательный вариант (на мой взгляд): сделать в тон ванили

3.JPG

или вот этот светло-песочный, что у Вас в сайд-баре.

4.JPG

Тогда это будет сочетаться с сайд-баром и не будет слишком броским. Можно также с оттенками бежевого поэкспериментировать (сделать чуть темнее, чем фон рубрики, должно еще лучше получиться). 

 

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

 


  • 0


#13 Федор Тимофеев
Федор Тимофеев
  • Пользователь
  • 20 сообщений
  • Репутация: 1

Отправлено 06 Сентябрь 2019 - 02:14

@Вито_052, как меня учили, всегда после каких либо изменений в коде, очисти кеш браузера. Всегда.  


  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

× Быстрый вопрос
Пользователь месяца
Rodiola Rodiola 1-й за Август
Очков активности: 1 552 3 темы, 106 сообщений, 9 баллов репутации
Сайт: rukodelkovo.ru
ТОП самых активных за этот месяц
  • Фотография MattCutts
    #1

    MattCutts (dmitrylee.ru)
    Очков активности: 480 5 тем, 65 сообщений, 4 балла репутации

  • Фотография Андрей WPM
    #2

    Андрей WPM (wpmaster.kz)
    Очков активности: 378 Вне конкурса за определение пользователя месяца

  • Фотография Chaser
    #3

    Chaser (majento.ru)
    Очков активности: 33 1 тема, 8 сообщений, 2 балла репутации

  • Фотография lena220678
    #4

    lena220678
    Очков активности: 33 1 тема, 19 сообщений, 1 балл репутации

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 27 0 тем, 18 сообщений, 1 балл репутации

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 24 0 тем, 8 сообщений, 2 балла репутации

  • Фотография Rodiola
    #7

    Rodiola (rukodelkovo.ru)
    Очков активности: 22.5 Вне конкурса за определение пользователя месяца

  • Фотография Constantine
    #8

    Constantine (constantine.video.blog)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (24ho.ru)
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография NataliaAntalia
    #10

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 15 0 тем, 10 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.08.2019
  • Яндекс выдача: 15.09.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru