Логотип и заголовок H1 на одной строке

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

У меня есть следующий код:

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

Я хотел бы знать, как сделать так, чтобы логотип и H1 были в одной линии. Спасибо!

Ответ 1

Как пример (DEMO):

HTML:

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

CSS

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO

Ответ 2

Попробуйте следующее:

Поместите оба элемента в контейнер DIV.
Дайте этому контейнеру переполнение свойства: auto
Поплавьте оба элемента влево, используя float: left
Дайте ширине H1, чтобы она не занимала всю ширину родительского контейнера.

Ответ 3

Если ваше изображение является частью логотипа, почему бы не сделать это:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

Используйте CSS для лучшего стиля.

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

Итак, вы можете сделать:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

Ответ 4

Попробуйте следующее:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

Ответ 5

Просто вставьте тег img внутри тега h1 как часть содержимого.

Ответ 6

Вы можете сделать это, как сказал вам Билли Моат, оберните <img> и <h1> в <div> и используйте float: left;, чтобы поместить ваше изображение влево, установите <div> width и установите line-height для h1 и используйте <div style="clear: float;"></div>, чтобы очистить плавающие элементы.

Fiddle

Ответ 7

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

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>

Ответ 8

в вашем файле css выполните img { float: left; } и h1 {float: left; }

Ответ 9

Проверьте это.

 .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}

Ответ 10

Я бы использовал bootstrap и установил html как:

<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>

Ответ 11

<head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>

Ответ 12

мне нравятся собаки, и толстые мотыги, я также люблю лодки. Потому что я знаю лодки и мотыги...

Ответ 13

Это мой код без тега div в теге заголовка. Моя цель/намерение - реализовать то же поведение с минимальными тегами HTML и стилем CSS. Оно работает.

whois.css

.header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

whois.html

<!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

выход:

Ответ 14

Шаги: -

Окружите оба элемента контейнером div.
Добавить переполнение: авто в контейнер Div.
Добавьте float: left к первому элементу.
Добавить позицию: относительная; верх: 0.2em; слева: 24em ко второму элементу. Верхнее и левое значения могут варьироваться в зависимости от вас.