时间戳

首页 > 解决方案 > 如何在 HTML 和 CSS 中的标题中的两个元素之间平均间隔一个元素

html - 如何在 HTML 和 CSS 中的标题中的两个元素之间平均间隔一个元素

问题描述

我有一个包含徽标和注销链接的标题。标题在我使用标签包含的外部页面中。然后我在标签下的 HTML 文件中有一个标题。我想自动将标题居中，以便它在 logo() 元素的末尾和 logout() 元素之间是均匀的空间。这样：

LOGO<等间距>TITLE<等间距>LOGOUT

这是我的代码现在的样子：

样式.css：

* {
    background-color: black;    
    font-family: verdana;
    font-size: 14px;
    color: white;
}
.header{
    position: absolute;
    top: 20px;
    right:10px;
}
h1{
   text-align: center;
    font-size: 45px;
    align-content: auto;
    margin-top:10px;
}

头文件.php

<a href="home.php"><img class = "logo" src="https://images.squarespace-cdn.com/content/v1/5d5a565bed5af400017a2c97/1614516482816-LL1JVIR67NFFN016FNID/THRIVE-LOGO-2_RGB_NEW_WHITE.png?format=1500w" width="300" height="50"alt="Company logo"></a>
  
<div class="header">
    <a href="logout.php?logout">Logout</a>
    
    <p></p>
</div>

set_goal.php

html>
        <head>
        <include src="header.php"></include>
        <h1>Please set your goal and choose your programme type</h1>
        <link rel="stylesheet" href="styles.css">
    </head>

标签： htmlcssformat

解决方案

除 3 或任何列的方式不止一种。您可以从此处查看示例。您也可以使用 display flex。

例子：

<div class="parent_element">
    <div class="logo">child element 1</div>
    <div class="titile">child element 2</div>
    <div class="logout">child element 3</div>
</div>

<style>
    .parent_element{
        display: flex;
        align-content: center;
    }
</style>

您在 set_goal.php 文件中犯了另一个简单的错误。您已经添加了头文件和 h1 标签，这意味着您在 head 元素下添加了元素，这是无效的。

推荐阅读