Выравнивание логотипа по центру

[Juanito]

Подскажите, как выровнять логотип сайта по центру горизонтально и вертикально. Вижу много способов в интернете, но если с выравниванием по центру понятно через text-align, то вот по вертикали или горизонтали я сомневаюсь. Надо вручную двигать какими-то параметрами, или есть какая-то универсальная команда чтобы само вцентрировалось в header?

Код лого:

Код Выделить Развернуть

h1.forumtitle
{
   line-height: 100px;
   font-size: 2.4em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}
h1.forumtitle a {
   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
   color: #333;
}

[GeorG]

Для вертикального выравнивания, используйте flex-контейнер. Примерно как-то так:

Код Выделить Развернуть

display: flex;
align-items: center;

[Juanito]

Для вертикального выравнивания, используйте flex-контейнер. Примерно как-то так:

Код Выделить Развернуть

display: flex;
align-items: center;

Не помогает. Просто ничего не происходит после добавления кода.

Пока что я добился выравнивания таким методом:

Код Выделить Развернуть

h1.forumtitle
{
   line-height: 100px;
   font-size: 2.4em;
   font-family: Geneva, verdana, sans-serif;
   margin: -12px 0px 0px 0px;
   padding: 0;
   text-align: center;
}Не знаю, насколько он нормален.

[GeorG]

Не помогает. Просто ничего не происходит после добавления кода.

Это смотря куда и для кого элемента вы добавляли.
В Гуле посмотрите статьи по flex, там всё подробно объяснено, с примерами.

[Juanito]

Это смотря куда и для кого элемента вы добавляли.
В Гуле посмотрите статьи по flex, там всё подробно объяснено, с примерами.

Я делал так:

Код Выделить Развернуть

h1.forumtitle
{
  line-height: 100px;
  font-size: 2.4em;
  font-family: Geneva, verdana, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

[GeorG]

Это мне ничего не говорит, я же не знаю как у вас там и что...

[Delysid]

Подскажите, как выровнять логотип сайта по центру горизонтально и вертикально. Вижу много способов в интернете, но если с выравниванием по центру понятно через text-align, то вот по вертикали или горизонтали я сомневаюсь. Надо вручную двигать какими-то параметрами, или есть какая-то универсальная команда чтобы само вцентрировалось в header?

Код лого:

Я думаю это не тот код лого, нужно искать именно место где ссылка картинки с параметрами как она выравнивается..
В браузере наведите на картинку и нажмите правую кнопку мыши и откройте "Проверить элемент", это поможет найти место где сама картинка выравнивается.

[GeorG]

Для родительского блока пропишите display: flex;

[Juanito]

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

A Flex почему-то сдигает картинку влево.

Сайт на хостинге форум.стратегикон.рф, можете зайти посмотреть.

[valdnieks]

Код Выделить Развернуть

<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
index.template.php

[Juanito]

Код Выделить Развернуть

<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
index.template.php

После этого кода у меня просто слетает форум)) С ошибкой syntax error, unexpected '<' Или я не туда его впихиваю и надо на какую-то определённую строку?

[valdnieks]

Правильно, это образец. Додуматься не можете?  

[Juanito]

Правильно, это образец. Додуматься не можете? 

Я очень слаб в в этих кодах - учусь, так сказать, на ходу. Пока только разобрался со сменой цветов, margin, padding, тенями и подобными простенькими командами. Данный код для меня слишком сложен и я не очень понимаю, как этот образец на практике применить. Не могли бы вы подсказать, что конкретно надо прописать на примере моего сайта? Ну или хотя бы сказать, что надо изменить в образце.

[valdnieks]

Ой, зарегистрировать на Вашем сайте невозможно.

index.template.php

Код Выделить Развернуть

global $context, $settings, $options, $scripturl, $txt, $modSettings;
Далее.

[DiS]

@Juanito даже на demo на этой теме нет логотипа... соответственно доработки ложатся на Ваши плечи..  может быть Вам другую тему попробовать? Например https://demo.smftricks.com/index.php?theme=82 от того же производителя ? Там и логотип присутствует 
скачать, если что тут
https://custom.simplemachines.org/themes/index.php?lemma=2847

PS надеюсь не обидел

[Juanito]

index.template.php

Код Выделить Развернуть

global $context, $settings, $options, $scripturl, $txt, $modSettings;
Далее.

Я нашёл эту строку. Но пока не понимаю, что нужно сделать дальше (приложил вид кода).

Код Выделить Развернуть

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();

echo '
<div', !empty($settings['st_enable_header_background']) ? ' class="header-main" '. (!empty($settings['st_custom_header_url']) ? ' style="background-image: url('.$settings['st_custom_header_url']. ');"' : '') : ' class="header-normal"', '>
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
</div>';

// Show the navigation tree.
theme_linktree(false, true);

echo '
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>';

// The main content should go here.
echo '
<div id="content_section">
<div id="main_content_section">';

Ой, зарегистрировать на Вашем сайте невозможно.

А в чём конкретно проблема?

@Juanito даже на demo на этой теме нет логотипа... соответственно доработки ложатся на Ваши плечи..  может быть Вам другую тему попробовать? Например https://demo.smftricks.com/index.php?theme=82 от того же производителя ? Там и логотип присутствует  
скачать, если что тут
https://custom.simplemachines.org/themes/index.php?lemma=2847

На этой теме логотип есть, его можно поставить в админ панеле специальной кнопкой и он ставится вместо названия сайта. Единственная проблема в том, что он ставится по левому краю.

[DiS]

На этой теме логотип есть, его можно поставить в админ панеле специальной кнопкой и он ставится вместо названия сайта. Единственная проблема в том, что он ставится по левому краю.

ХЗ с чем Вы там боретесь до сих пор. . У меня всё ровно    
Я думал что проблема решена
Вам недоступны вложения в этом разделе.

[Juanito]

ХЗ с чем Вы там боретесь до сих пор. . У меня всё ровно    
Я думал что проблема решена
Вам недоступны вложения в этом разделе.

У меня выравнивание стоит с помощью

Код Выделить Развернуть

margin: -12px 0px 0px 0px;
Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять. Плюс борюсь с нерезиновостью логотипа на мобильных устройствах

[valdnieks]

Я нашёл эту строку. Но пока не понимаю, что нужно сделать дальше (приложил вид кода).

Далее, страница:

Код Выделить Развернуть

<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<a target="_blank" rel="nofollow" href="http://aaa/index.html">

А в чём конкретно проблема?

Подтверждение не приходит.

[Juanito]

Подтверждение не приходит.

В спаме смотрели? Какая почта (гмаил, маил...)? Чуть позже отпишу по поводу кода.

[Juanito]

Далее, страница:

Код Выделить Развернуть

<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<a target="_blank" rel="nofollow" href="http://aaa/index.html">

К сожалению, пока абсолютно не понимаю, что надо делать. По пробую по шагам... Вот код, который я нашёл, который, как мне кажется, отвечает за это лого. Этот тот код или нет? Если да, то я не очень понимаю, как в него внести изменения, которые вы написали в шаблоне, ибо он совсем другой.

Код Выделить Развернуть

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();

echo '
<div', !empty($settings['st_enable_header_background']) ? ' class="header-main" '. (!empty($settings['st_custom_header_url']) ? ' style="background-image: url('.$settings['st_custom_header_url']. ');"' : '') : ' class="header-normal"', '>
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
</div>';

// Show the navigation tree.
theme_linktree(false, true);

echo '
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>';

// The main content should go here.
echo '
<div id="content_section">
<div id="main_content_section">';

[Yarik]

Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.

[Juanito]

Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.

Мне кажется, что проблема не в теме, а в самом лого. Обратите внимание, что сама тема нормально адаптируется, вылезает за пределы лишь лого, которое всё и ломает.

[DiS]

Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять

без понятия про оптимизацию... проблема же решена  

Плюс борюсь с нерезиновостью логотипа на мобильных устройствах

это уже вторая проблема..
её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...
Я бы наверно просто уменьшил/изменил лого

Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.

Вот-вот .. и я про тоже

[Juanito]

это уже вторая проблема..
её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...
Я бы наверно просто уменьшил/изменил лого

А мне вот говорят уже двое человек, что это решается с помощью width (в том числе код, что тут выше предлагают, тоже содержит width как я вижу). Только я пока не понимаю, как и где это прописывать  Просто дописывание max-width 100% в css не помогает.

[valdnieks]

А мне вот говорят уже двое человек, что это решается с помощью width (в том числе код, что тут выше предлагают, тоже содержит width как я вижу). Только я пока не понимаю, как и где это прописывать   Просто дописывание max-width 100% в css не помогает.

width это команда размера, например [youtube width=500]ghfjfjjdjd[/youtube], чтобы размер подкорректировать.
А по поводу ЦСС, изначально хотел написать, но в index.template.php обязательно требуется внесение.

[Juanito]

width это команда размера, например [youtube width=500]ghfjfjjdjd[/youtube], чтобы размер подкорректировать.
А по поводу ЦСС, изначально хотел написать, но в index.template.php обязательно требуется внесение.

Я пока что совсем не понимаю, что именно надо вносить. Можете по-подробнее написать, основываясь на этом моём посте? https://www.simplemachines.ru/index.php?topic=20395.msg174815#msg174815

[Yarik]

её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...

Все правильно.

Код Выделить Развернуть

@media only screen and (max-width:762px) { ту сами стили}Все что мельче 762px будут подтягивать стили из того что выше.
Допустим на 1366 пикселях стиль .boardindextable{min-width:100%} смотрится нормально,а ниже 762px вылазит за границы.Значит

Код Выделить Развернуть

@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}Будет загружаться отсюда.

[Сан]

h1 img {width: 100%; max-width: 600px;}
Вот и всё. Больше ничего не надо.

[Juanito]

h1 img {width: 100%; max-width: 600px;}
Вот и всё. Больше ничего не надо.

Применил этот код, изображение уехало влево. Пришлось дописать margin -12px 0px 0px 325px, чтобы центрировать, но с такими настройками на мобильных ещё больше съезжает вправо.

[Yarik]

Пришлось дописать margin -12px 0px 0px 325px, чтобы центрировать, но с такими настройками на мобильных ещё больше съезжает вправо.

И будет.Стиль то один для всех устройств.Чем мельче экран тем сильнее съедет.

[Juanito]

Все правильно.

Код Выделить Развернуть

@media only screen and (max-width:762px) { ту сами стили}Все что мельче 762px будут подтягивать стили из того что выше.
Допустим на 1366 пикселях стиль .boardindextable{min-width:100%} смотрится нормально,а ниже 762px вылазит за границы.Значит

Код Выделить Развернуть

@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}Будет загружаться отсюда.

Я даже понял смысл кода. Только не понимаю, куда именно его прописать. Что делает параметр @media?

[Yarik]

Я даже понял смысл кода. Только не понимаю, куда именно его прописать. Что делает параметр @media?

Добавлять в самый низ.
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
Тип   Описание
all   Все типы. Это значение используется по умолчанию.
aural   Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille   Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld   Наладонные компьютеры и аналогичные им аппараты.
print   Печатающие устройства вроде принтера.
projection   Проектор.
screen   Экран монитора.
tv   Телевизор.
Сделайте так

Код Выделить Развернуть

h1.forumtitle {
    line-height: 100px;
    font-size: 2.4em;
    font-family: Geneva, verdana, sans-serif;
    padding: 0;
    text-align: center;И логотип будет по центру.Только лого сделайте поменьше чтобы оно влезало в разные расширения экрана.В идеале не больше 320рх

[Juanito]

Добавлять в самый низ.

В самый низ чего? Блока логотипа или вообще в самый низ index.css?

Пока что уменьшил логотип до 320px и добавил указанный код

Код Выделить Развернуть

@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}

 в самый низ index.css. Вылазит то конечно меньше (из-за меньшего размера лого), но всё равно вылазит.

[Yarik]

В самый низ чего? в самый низ index.css?

Да

и добавил указанный код

Это был пример.Код можете удалять.

Вылазит то конечно меньше (из-за меньшего размера лого), но всё равно вылазит.

А что у Вас с шапкой?Почему пространство справа пустое какое-то?

[Juanito]

А что у Вас с шапкой?Почему пространство справа пустое какое-то?

Так потому что логотип вылазит, вот он и делает это пустое пространство.

Это был пример.Код можете удалять.

Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном 

[Yarik]

Так потому что логотип вылазит, вот он и делает это пустое пространство.

Да это я уже понял...

Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном

Не задумывалась тема под такие большие логотипы.Там максимально 240рх лого должно быть,а лучше ещё меньше.Или в CSS делать логотипы разных размеров и прописывать его в css.
Вниз самый своего css листайте,увидете там @media only screen and вот это и будут адаптивные стили вашей темы.Там их хватает.

[DiS]

Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном  

Вам недоступны вложения в этом разделе.
 

[GeorG]

Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять.

Я только написал про то, что с помощью flex сделать можно (про оптимизацию речи не было), это не претендует на самый лучшее решения проблемы, оно может быть более удобным, если заранее неизвестны размеры высоты самого родительского блока, в котором происходит выравнивание по вертикале дочернего элемента, если всё известно, то я бы возможно сам использовал отступы.