如何在不移动标题的情况下将此徽标移动到我的标题上？答案

【问题标题】：How do I move this logo onto my header without moving title?如何在不移动标题的情况下将此徽标移动到我的标题上？
【发布时间】：2019-10-18 19:24:20
【问题描述】：

我正在建立一个网站，我想将标题和徽标放在标题中，标题在中间，徽标在左侧。

问题是标题将徽标向下推。

我尝试了以下方法：

边距
填充
移动代码
更改“显示”

我还能尝试什么？

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
}
.titlemain {
    font-size: 4vw;
    text-align: center;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

https://pastebin.com/Vvw7LtQE - CSS

<div class="header">
        <h1 class="titlemain">The Little Beauty Studio</h1>
        <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
    </div>

https://pastebin.com/0BKmtkZ8 - HTML

感谢您的帮助。

【问题讨论】：

这是因为h1标签是块级的，所以它占据了整个div的宽度
您可以告诉<h1> 显示内联，或者您可以将徽标向左或向右浮动，这也将帮助您实现所需的内容。
谢谢大家，我通过显示内联来修复它，然后将徽标向左浮动并调整填充以使文本居中并定位徽标
或试试这个stackoverflow.com/questions/45506657/…

标签： html css

【解决方案1】：

试试这个代码：
CSS：

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
}
.titlemain {
    font-size: 4vw;
    text-align: center;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.header img {
    position: absolute;
    top: 41%;
    left: 3%;
}

html：

<div class="header">
    <h1 class="titlemain">The Little Beauty Studio</h1>
    <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>

【讨论】：

【解决方案2】：

我通过显示内联，然后将徽标向左浮动并调整填充以使文本居中并定位徽标来修复它。

.logomain {
  float: left;
  padding: 2.5px 13.5% 0 175px;
}
.titlemain {
    font-size: 4vw;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: inline;
}

【讨论】：

【解决方案3】：

如果你可以改变你的 HTML 结构，我会这样做：

HTML

<div class="header">
  <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
  <h1 class="titlemain">The Little Beauty Studio</h1>
</div>

CSS

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
  display: flex;
  flex-direction: row;
}

.header img,
.header h1 {
  align-self: center;
}

h1 {
  width: 100%;
  text-align: center;
}

【讨论】：

【解决方案4】：

如果您在网站上工作，我非常想推荐您使用 UI 框架 (Bootstrap)，这将使您的大部分任务变得更容易。

他们提供了一组预定义的样式，您可以使用这些样式克服许多原始问题，而且您可以在项目中做得非常好。大多数商业上可用的 HTML 网站都使用 Bootstrap 或相关的东西。

话虽如此，让我们来看看你的问题。这是完成您想要的最简单的方法。

<div class="header">
    <table width="100%">
        <tr>
            <td>
                <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
            </td>
            <td>
                <h1 class="titlemain">The Little Beauty Studio</h1>
            </td>
        </tr>
    </table>
</div>

现在让我们看看如何使用 Bootstrap 来改进它！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">Logo</a>
    
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>

</body>
</html>

在这个主题上做一些简单的谷歌搜索，你可以找到一些参考这个的好材料。

祝你好运！

【讨论】：

【解决方案5】：

请试试这个代码

HTML

<header>
  <img  src="https://api.akeneo.com/img/illustrations/illus--Assetcategory.svg">
  <h1>Your Title Area</h1>
</header>

CSS

header {
  position: fixed;
  width: 100%;
  border:solid 1px rgba(0,0,0,0.8);
  vertical-align: middle;
  line-height: 4em;
}
header img {
   width:100px;
   float:left;
}
header h1{
  text-align:center;
  }

https://jsfiddle.net/ajimon/msc3opq5/25/

【讨论】：