html - 如何将标题放在导航栏的中间？-6ren

html - 如何将标题放在导航栏的中间？

转载作者：行者123 更新时间：2023-11-28 01:18:25

26

4

如何设置我的导航和标题的位置，使其看起来像这样？

我一直在尝试在 google 和 stack overflow 上搜索，但找不到任何东西。

这是我的代码，谢谢。

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#wrap { margin: 0 auto; width: 700px; }

#header{

}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}

#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}

/* Edits */
#header,
#content{ clear: both; }

#header,
#header h1,
#header #nav { float: left; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gullible</title>
  <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

<div id="wrap">

    <div id="logo">
        <h1>Gullible</h1>
        <ul id="nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="home.html">Visit</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div id="content">
        <h1></h1>
    </div>

</div>

  <footer>
  <h2>Gullible</h2>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>
</html>

最佳答案

试试 Flexbox 和 justify-content: space-around;

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

ul {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid black;
  padding: 0;
}

.logo {
  font-size: 30px;
  font-weight: bold;
  padding: 10px 0;
}

a {
  text-decoration: none;
  color: black;
}

<ul>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
  <li class="logo"><a href="">LOGO</a></li>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
</ul>

关于html - 如何将标题放在导航栏的中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34798058/

26

4

0

文章推荐： c++ - 在 IPP 2019 中使用 Cubic 调整大小比 IPP 5.2 慢

文章推荐： css - 将行内 block DIV 对齐到容器元素的顶部

scala - Scala中列表的模式匹配结束/中间
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
SSL 中间 SHA2
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
html - 如何将图像垂直和水平放置在中心/中间
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。使用绝对位置
CSS:最小高度和垂直对齐:中间
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
jquery - 滚动到元素并将其放置在 View 中间
我正在尝试自动滚动到订单簿的中间行。我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
javascript - 计算变换原点以将图像缩放到视口(viewport)中间
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
regex - 删除开头、中间、结尾的空格
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。要选择我使用过的所有空间: SELECT regexp_replace('
mysql - 中间 SQL 表 : What for?
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
jquery - 如何将图像元素定位在视口(viewport)中间？
我正在寻找以下解决方案。我想定位一个图像元素，例如在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。我搜索的一个例子就像下面的网
html - 中间 Bootstrap 网格类
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
html - 我试图将文本居中放置在我的页面 HTML 中间
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
CSS 中间 div 高度
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。有什么想法
html - 使用相对和绝对属性将元素定位在 div 中间
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
中间/链证书的 SSL 证书错误
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
ssl - 中间 CA 的证书链问题
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
http - 中间 HTTP 缓存是什么以及在哪里
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。如果我将 Cache-control heade
html - 中间 Angular 左右双按钮
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？详细信息:- 带有 2px 红色边框的 di
html - 中间 CSS 中带有白线的文本
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
python - 有没有办法比较阿拉伯字符而不考虑它们的初始/中间/最终形式？
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
linux - 在没有临时(中间)文件的情况下处理同一文件
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变

首页

博学

6Ren·AI

商城

html - 如何将标题放在导航栏的中间？