Выровнять картинку в заголовке с помощью css

ProgramBox

Выровнять картинку в заголовке с помощью css

Post author:admin
Запись опубликована:19 августа, 2022
Post category:Вопросы по программированию

#html #css #head #html-heading

#HTML #css #заголовок #html-заголовок

Вопрос:

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

Заголовок в html

 <img src="/static/logo.png" alt="Start" class="header_logo" id="header_logo">

{% if session['loggedin'] %}

    <button  type="button" onclick="{{ url_for('logout') }}" class="header_logout">Logout</button>

{% else %}

    <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>

    <button type="button" onclick="{{ url_for('register') }}"
    class="header_register">Registrieren</button>

{% endif %}

файл css

 .header {
    position: fixed;
    top: 0;
    background-color: lightgrey;
    width: 100%;
    text-align: right;
    display: inline-block;
    font-size: 2vw;

}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

Вот как это отображается

Я был бы рад, если бы кто-нибудь мог мне помочь. 🙂

Ответ №1:

Как насчет flex? Гибкие поля более надежны, чем плавающие.

 .header {
  padding:1rem 0.2rem;
  display:flex;
  justify-content: flex-end;
  align-items:center;
  position: fixed;
  top: 0;
  background-color: lightgrey;
  width: 100%;
  text-align: right;
  font-size: 2vw;

}
.header .logo img {
  width:10rem;
}
.header .logo {
  margin-right: auto;
}
.header .interaction_buttons {
   display:flex;
}
.header .interaction_buttons button:first-child {
  margin-right:1rem;
}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

 <div class="header">
  <div class="logo">
     <img src="https://bankingthefuture.com/wp-content/uploads/2019/04/dummylogo.jpg" alt="">
  </div>
  <div class="interaction_buttons">
     <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>
    <button type="button" onclick="{{ url_for('register') }}"   class="header_register">Registrieren</button>
  </div>
</div

Развернуть фрагмент

Ответ №2:

Вы пробовали использовать «float» в css? Я думаю, что вы могли бы использовать «float: right;» на кнопках входа / выхода.

1. Привет и добро пожаловать в SO. Ваш ответ — это просто комментарий, а не ответ. Не используйте опцию anwser, если вы не можете со 100% уверенностью ответить на него и подтвердить это фрагментом кода и объяснить, что вы делаете. Однако вы также не отвечаете на вопрос, поскольку кнопки уже выровнены по правому краю, просто не на той же строке, что и логотип. И последнее, но не менее важное: ваша рекомендация ужасна. Использование float float для целей стилизации не только устарело, но и не предназначено для использования. Float следует использовать только для плавающих изображений внутри текстового абзаца.

Ответ №3:

в классе .header_logo вы указали display свойство со block значением! display: block; занимает линию отверстия, поэтому ваши кнопки размещаются в следующей строке.
с другой стороны, его лучше использовать float для img и кнопок
, которые вы можете увидеть в нескольких примерах для display свойств здесь: https://www.w3schools.com/cssref/pr_class_display.asp

1. не используйте float для такой задачи. Float в данном случае является не только устаревшим, но и неправильно используемым инструментом для него. Для этого у вас есть flexboxes. Float следует использовать только для перемещения изображений внутри текстового абзаца.

2. Я не согласен! основная идея моего комментария заключалась в display использовании! Я упомянул только float в том случае, если он / она хотел использовать для этого некоторые дополнительные вещи!

Метки: Выровнять картинку в заголовке с помощью css