鹿泽鹿泽  2024-09-03 17:25:40 鹿泽笔记 |  隐藏边栏 |  0 

公司的网站，设置的h1标签是有问题的，直接把整个logo都写进到h1标签里面了，这样没什么用处。

  • logo很空泛，可能首页还有点用，内页是没什么用的。
  • 内页建议用标题或者是文章名设置为h1。

我看到文章的标题是h2标签，那我直接就修改程h1了，这个时候肯定是不行的，因为样式不好，我就直接去css表格里找到对应的样式行，然后把之前定义的h2修改为h1的样式，然后大小都是适合的，但是没有居中，懒得麻烦，我就直接在h1标签后缀加上居中的代码了。

<h1 style="text-align:center;">调用的标题</h1>

这样看来就合适了。

CSS代码如下：

h1 {text-align:center;font-size:22px;color:#333;font-weight:bold;line-height:30px;padding-bottom:10px;padding-top:10px;}

网站代码写的实在是太烂了，所以我都不忍心吐槽了，将就修改修改用吧，一点SEO优化用户体验都没有。

下面是网上找到的教程，应该也适合，可惜我不会，没有使用过。

使用CSS使H1标签居中

要使HTML中的h1标签居中，可以使用CSS（层叠样式表）来实现。以下是几种常见的方法：

方法一：使用文本对齐属性

通过设置text-align属性为center，可以使<h1>标签内的文本居中

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>H1居中示例</title> 
    <style> 
        h1 { 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
    <h1>这是一个居中的标题</h1> 
</body> 
</html>

方法二：使用Flexbox布局

Flexbox是一种强大的布局工具，可以轻松实现元素的水平和垂直居中。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>H1居中示例</title> 
    <style> 
        body { 
            display: flex; 
            justify-content: center; /* 水平居中 */ 
            align-items: center; /* 垂直居中 */ 
            height: 100vh; /* 使body占满整个视口高度 */ 
            margin: 0; 
        } 
    </style> 
</head> 
<body> 
    <h1>这是一个居中的标题</h1> 
</body> 
</html>

方法三：使用Margin属性

通过设置margin属性为auto，可以使<h1>标签在其父元素中水平居中。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>H1居中示例</title> 
    <style> 
        h1 { 
            margin: 0 auto; /* 水平居中 */ 
            width: fit-content; /* 使宽度适应内容 */ 
        } 
    </style> 
</head> 
<body> 
    <h1>这是一个居中的标题</h1> 
</body> 
</html>

以上三种方法都可以实现<h1>标签的居中显示，根据具体需求选择合适的方法即可。

其实我是建站新手，只能通过修改之前别人使用过的样式和代码来修改，这已经足够了。

网站建设
1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

你可能也喜欢

热评文章

上一篇
下一篇