HowtomovecontentinultothecenterHTML+CSS

作者：Mars丶fasfa | 来源：互联网 | 2023-01-05 09:28

Imunabletocenterthismenuwithlinks.text-align:center;inuldoesntworkandIvetriedt

I'm unable to center this menu with links. "text-align: center;" in ul doesn't work and I've tried to find a solution for at least 1 hour now. I'm quite new to web developing, any help is appriciated.

我无法通过链接将此菜单置于中心位置。 “text-align：center;”在ul不起作用，我试图找到一个至少1小时的解决方案。我对网络开发很陌生，任何帮助都是适合的。

ul {
list-style-type: none;
background-color: #3A3A3A;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
display: inline;
float: left;
font-size: 22px
}

li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}

li a:hover {
color: #00DBFF;
}



LOGIN
REGISTER
DAM
MÄN
EXEMPEL
TEST
LOGOUT

2 个解决方案

#1

li {
    display: inline;
    /*float: left;*/  /* <----- */
    font-size: 22px
}

li a {
    display: inline-block;  /* <----- */
    padding: 20px 20px;
    text-decoration: none;
}

JSFiddle

的jsfiddle

#2

ul {
  list-style-type: none;
  background-color: #3A3A3A;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  display: inline;
  float: left;
  font-size: 22px
}
li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
}
li a:hover {
  color: #00DBFF;
}


  
    LOGIN
    
    REGISTER
    
    DAM
    
    MÄN
    
    EXEMPEL
    
    TEST
    
    LOGOUT

Try this if you want to: li {text-align: center;}

如果您愿意，请尝试以下操作：li {text-align：center;}

推荐阅读

go
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
js
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
bit
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
tree
推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]

蜡笔小新 2023-12-13 19:35:25
case
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
js
Java源代码安全审计（二）：使用Fortify-sca工具进行maven项目安全审计

本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践，记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程，包括clean、build、Analyze和Report。在安装mvn后，作者遇到了一些错误，并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验，并成功进行了mvn install。 ... [详细]

蜡笔小新 2023-12-10 13:01:22
js
Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案

本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题，并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式，我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的，因此无需担心会话信息被覆盖的问题。需要注意的是，本文讨论的是多个客户端级别上的多用户登录，而非同一个浏览器级别上的多用户登录。 ... [详细]

蜡笔小新 2023-12-10 12:00:40
js
CSS中的包裹性

之前一直都知道css中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。什么是包裹性？包裹性就是父元素的宽度会收缩到和内部元素宽度一样 ... [详细]

蜡笔小新 2023-10-17 20:09:31
python
学习SLAM的女生，很酷

本文介绍了学习SLAM的女生的故事，她们选择SLAM作为研究方向，面临各种学习挑战，但坚持不懈，最终获得成功。文章鼓励未来想走科研道路的女生勇敢追求自己的梦想，同时提到了一位正在英国攻读硕士学位的女生与SLAM结缘的经历。 ... [详细]

蜡笔小新 2023-12-14 17:55:18
config
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
js
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
js
postman测试登录后的接口_使用postman进行接口测试的方法(测试用户管理模块)

本文介绍了使用postman进行接口测试的方法，以测试用户管理模块为例。首先需要下载并安装postman，然后创建基本的请求并填写用户名密码进行登录测试。接下来可以进行用户查询和新增的测试。在新增时，可以进行异常测试，包括用户名超长和输入特殊字符的情况。通过测试发现后台没有对参数长度和特殊字符进行检查和过滤。 ... [详细]

蜡笔小新 2023-12-14 10:29:45
js
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
js
CSS3 animation动画属性详解及用法

本文详细介绍了CSS3 animation动画的各种属性及用法，包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习，读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]

蜡笔小新 2023-12-11 08:47:46
js
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47

Mars丶fasfa

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章