无法在Bootstrap中将li元素正确居中(Alpha)
在Bootstrap中将li元素正确居中的方法有很多种，以下是一种常用的方法：
- 使用flexbox布局：在li元素的父容器上添加d-flex和justify-content-center类，可以使li元素水平居中。
<ul class="d-flex justify-content-center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>- 使用text-center类：在li元素的父容器上添加text-center类，可以使li元素文本居中。
<ul class="text-center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>- 使用mx-auto类：在li元素上添加mx-auto类，可以使li元素水平居中。
<ul>
<li class="mx-auto">Item 1</li>
<li class="mx-auto">Item 2</li>
<li class="mx-auto">Item 3</li>
</ul>以上是几种常用的方法，根据具体情况选择适合的方法即可。
关于Bootstrap的更多信息和使用方法，可以参考腾讯云的Bootstrap产品文档：Bootstrap产品介绍
相关·内容
2回答
引导4-在列表中对齐文本
、、、
我刚刚开始使用引导程序4，我无法在列表组中对文本进行居中。
在引导3中，以下功能非常完美：
.list-con {
text-align:center;
}
然而，在引导4。文本-只对齐多行文本。
li {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div
浏览 6提问于2017-07-19得票数 0
回答已采纳
1回答
我正在使用bootstrap v3 &试图在容器的中心对齐无序列表。由于某种原因，它没有正确地居中
这是html
<!-- Page Content -->
<div class="container" style="border: 1px solid red">
<div class="row">
<div class="col-lg-12">
<ul id="tabs&#
浏览 1提问于2015-07-09得票数 0
所以简而言之，我需要在这个插件中使用类似“居中模式”的东西
我需要这样做，但是使用bootstrap。因为lead希望在可能的情况下避免使用插件。除非只使用插件会更简单。
我所在项目的首席开发人员希望避免在可能的情况下添加插件。我们使用的是bootstrap 3，他认为可以编辑bootstrap附带的carousel来做我们需要的事情。尝试编辑旋转木马，或者从头开始构建一些东西会不会更有时间效率(在这一点上，使用插件不是很有意义吗？)
我唯一的想法是有一个div，有一堆内联的div，在点击时就会被翻译。这是正确的方法吗？
或者，有没有一种简单的方法来操作内置的carousel？
到
浏览 0提问于2016-02-02得票数 5
2回答
使页脚导航链接水平居中
、、、、
由于某些原因，我不能水平居中我的页脚链接。我希望我的链接居中，然后“所有权利保留”部分下面也居中。我可以通过应用.center使“保留所有权利”居中，但这不会影响列表项。你知道我错过了什么或者做错了什么吗？
这是我的Ruby on Rails应用程序的页脚部分，我正在使用Bootstrap 3.0进行样式设置。
<nav class="navbar">
<div class="container center">
<ul class="nav">
<li c
浏览 2提问于2013-11-19得票数 1
回答已采纳
我无法让我的任何javascript在bootstrap上工作，这是调用：
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
这就是我想要做的事情
<ul class="nav nav-pills">
<li
浏览 0提问于2012-10-06得票数 0
2回答
我试图在Bootstrap 4 Alpha 6的旋转木马中水平居中放置图像。
在我尝试过的任何方法中，它似乎都不起作用，包括使用center-block。
到目前为止，我尝试了以下内容：
有什么提示吗？
浏览 16提问于2017-03-12得票数 4
回答已采纳
我转到twitter bootstrap主页，copy在下面粘贴了他们的菜单：
.navbar.navbar-inverse.navbar-fixed-top
.navbar-inner
.container / I tried 'margin: 0 auto;' since nav is a display block item but with no luck
%button.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle
浏览 1提问于2013-08-30得票数 1
1回答
在% div上添加%边距
、、、、
我正在设计的一个网站上有一些bug，关于响应式设计。
我想创建一个框，以90%的屏幕宽度为例，然后添加其他3个框内的主框，但水平居中与百分比边际，因为我想始终居中的移动版本的网站。例如，如下所示：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
和CSS：
ul {
width: 90%;
border: green;
}
li {
margin-left: 11%;
margin-right: 11%;
}
但是当我调整浏览器的大小时，第三个
浏览 0提问于2013-05-25得票数 0
3回答
我需要两栏：
左边的按钮
右边的名单
它们都需要在包装器div的中间垂直居中。到目前为止，我得到了这个：
我使用这段代码垂直对包装器内的内联块进行居中：
.wrapper {
/* let it fill the whole container */
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
}
.wrapper:before {
content: '';
display: inline-block;
vertical-align: mid
浏览 7提问于2016-02-10得票数 2
回答已采纳
2回答
NavBar到中心
、、、、
我在justify-content-sm- <a class="navbar-brand" href="#">Navbar</a>上遇到了一些小问题，我想将这个内容居中，但问题是当我试图居中它时，它也会将切换图标居中。：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<
浏览 25提问于2021-02-25得票数 0
2回答
自从我将我的bootstrap从2.1升级到3.0后，我无法将很多div放在中心
例如，使用下面的代码：
<div id="center" class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default" h
浏览 0提问于2013-09-27得票数 7
回答已采纳
我以为text-align可以在推特Bootstrap中工作，但它不能？我不知道是怎么回事。有没有其他方法可以替代居中，或者我只能使用页边距？很抱歉在风格text-align上使用得太多了。我只是想确定我没有遗漏什么。
<div class="row-fluid span12" style="text-align:center;">
<ul class="nav nav-pills" style="text-align:center;">
<li style="text
浏览 0提问于2012-10-12得票数 0
回答已采纳
我有一个使用Bootstrap 3的网页。在这个网页中，我试图在col-xs-12中居中放置一个ul。目前，在这个中，我有以下内容：
<div class="container">
<div class="row">
<div class="col-xs-12 center-block" style="background-color:grey;">
<ul class="list-inline">
<li><
浏览 41提问于2017-01-10得票数 5
我正在使用twitter bootstrap创建可切换的标签。下面是我使用的css：
<div class="container">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile&
浏览 2提问于2012-02-24得票数 87
回答已采纳
6回答
我正在尝试弄清楚如何使数据居中对齐，我无法正确解释它，所以我将代码粘贴在这里。
<div class"mainDiv">
<ul>
<li><dl> <dt> dynamic name </dt> <dd> dynamic value </dd> </dl></li>
<li><dl>
<dt>dynamic name</dt>
浏览 0提问于2013-11-23得票数 0
我试着把导航栏的内容放在Bootstrap4，Alpha5中，我用谷歌搜索了一下，我猜可能有一些涉及d-block和mx-auto的技巧。
然而，我找不到如何将导航链接居中，使它们完全居中，而不仅仅是在它们周围添加一个容器。
示例导航栏代码我正在玩：。
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="na
浏览 0提问于2016-11-10得票数 7
回答已采纳
2回答
我有如下菜单：
<ul>
<li><a href="#">First Item</a></li>
<li><a href="#">Long Item</a></li>
<li><a href="#">Very very short Item</a></li>
<li><a href="#">Another Item</a>&l
浏览 1提问于2013-07-02得票数 4
回答已采纳
3回答
所以我试着在css中做一个导航栏，但是当我把一个<a>的字体变大的时候，所有其他的字体都被弄乱了，而且没有垂直居中。我使用了inspect元素，我发现带有导航栏-right类的<a>标签的高度和它们的<ul>父标签的高度不一样，因此没有居中。
codepen：
有什么不需要使用bootstrap/javascript的解决方案吗？
HTML：
<ul class="nav" role="navigation">
<li class="nav-left"><a
浏览 0提问于2016-11-24得票数 0
1回答
上面的堆栈图标
、、
这是我的HTML (不能更改)
如何堆叠文字上方的图标？(应该居中)
.quicklinks {
li {
a {
font-size: 10px;
text-transform: uppercase;
.glyphicon {
font-size: 26px;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="styles
浏览 4提问于2015-08-24得票数 1
回答已采纳
0回答
这是我的代码。
<!DOCTYPE HTML>
<html>
<head>
<title>Personal Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/
浏览 0提问于2017-12-06得票数 0
3回答
我目前使用的是bootstrap 3.0.0的最新版本
问题很简单。在jumbotron容器中，我使用如何将文本与徽标居中对齐
我已经玩了几个小时了，和col md-*玩了几个小时了，但运气不好。
在bootstrap 2.3.2中，我通过使用.text-center和.pagination center实现了将英雄中的所有内容居中的效果(对于图像？？-它起作用了)
这个小提琴显示了我试图用bootstrap 3.0.0居中的文本和图像
浏览 0提问于2013-09-10得票数 6
回答已采纳
2回答
考虑以下问题:您想要对菜单进行居中，这将更改它的内容(例如，按下按钮后，第一个按钮的内容将从"Hello“设置为”Gre安，user!“)。或者其他类似的东西。重要的是元素的宽度将是一个变量。
假设您也希望对元素的内容进行中心化。我发现的一个基本方法是：
.centerMe1 {
margin-right: auto ;
margin-left: auto ;
max-width: 500px;
}
这非常好，但我不能在本例中使用它，因为我不知道元素的宽度。我尝试使用float:left，因为它将父级的宽度设置为等于它的子级的宽度，但是它没有工作。
浏览 2提问于2013-08-14得票数 1
回答已采纳
2回答
我目前正在创建一个列表，而不是默认的元素●希望拥有一个chevron right，如示例照片中所示。但是，我使用的不是bootstrap，而是Bulma。有没有办法在不使用bootstrap的情况下获得它。我是用>这个角色做的。然而，这个没有那么好。
那么我的问题是，在不使用bootstrap的情况下，如何将字符“>”替换为这样的“chevron right”？
html
<ul className="footer-link">
<li>
First 1
</li>
<li>
浏览 18提问于2021-05-29得票数 0
回答已采纳
检查此
我有一个dropdown，当切换dropdown时，我想要更改另一个div's背景颜色(本例中是带有.main-content和.reqdiv类的div's)。
我已经尝试过这些选择器~，>，+，我知道它们在我的例子中不会起作用。有没有人可以建议我如何不使用JS/JQuery来解决这个问题？
.main-content {
height: 200px;
width: 100%;
background: green;
}
.dropdown-menu {
top: 35px!important;
}
.nav-btn.show~.main-c
浏览 0提问于2017-09-16得票数 0
5回答
我想在中间对齐一个无序的列表，包括引导符号。
ul {
list-style-type: disc !important;
padding-left: 1em !important;
margin-left: 1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6
浏览 7提问于2019-10-01得票数 0
回答已采纳
我正在做一个网页布局，我在顶部有一个导航栏，设置为position:fixed；width: 100%；这样即使用户滚动，它也会留在视口的顶部，占据页面的宽度。我想把一个居中的水平无序链接列表(宽度940px)放在里面，如下所示：
<nav id='nav-bar'>
<ul>
<li><a href='#'>text</a></li>
<li><a href='#'>text</a></li&
浏览 2提问于2012-08-29得票数 0
回答已采纳
4回答
我有一个包含两个ul的div。我想把第一个ul放在右边，第二个ul放在中间。
我不能使用绝对定位，因为它使我在嵌套元素和移动视图中遇到了其他问题。
这就是我所做的：
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w
浏览 1提问于2013-03-11得票数 2
回答已采纳
4回答
Bootstrap中的中心导航栏
、、、、
如何使用bootstrap将菜单居中？
HTML：
<nav class='navbar navbar-default'>
<div class='container-fluid container'>
<div class='navbar-header'>
<a class='navbar-brand' href='#'>Title</a>
</div>
<div id=&#
浏览 2提问于2016-10-10得票数 1
1回答
中心引导导航栏
、、
我在bootstrap导航栏中有一个非常简单的链接列表：
<div class="navbar">
<ul class="nav">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a><
浏览 1提问于2013-07-11得票数 0
回答已采纳
我在Bootstrap中有一个列表项目，它在一个无序的列表项目中使用了2个跨度标签。
我希望在垂直和水平居中，然后堆叠在列表项目文本上方的字形图标。
此外，在活动状态和悬停状态下都保留text-decoration:none；。
如何为此创建css3？
<nav>
<ul>
<li>
<link href="#" title="HOME">
<span class="glyphicon glyphicon-globe"></span>
<span class
浏览 0提问于2015-06-30得票数 0
如果多个不同的无序列表都具有相同的类，是否可以通过它们包含的文本的最后一个字母来对齐它们？我试着改变方向，text-align，text-align-last，但是似乎没有任何东西能让所有的无序列表正确排列。也就是说，输出可能如下所示：
AAAAAAAAAA IMAGE XXXXX YYYYY ZZZZZ
BBBBBBB IMAGE XXXXX YYYYY ZZZZZ
CCCCCCCC IMAGE XXXXX YYYYY ZZZZZ
无论如何，这是我当前的实际输出：
jsfiddle.net/yyjjjzzt/
正
浏览 1提问于2015-01-18得票数 0
我在Bootstrap 4中有以下设置：
与“供应商”文本在它的元素应该是垂直居中，我有相同的代码不同的行，我希望他们居中。似乎没有一种解决方案对我有效。
这里有没有人能找出我做错了什么，给我指了个正确的方向？
谢谢。
浏览 2提问于2016-12-21得票数 34
回答已采纳
2回答
我想在两个浮动<li>之间对齐一个元素
我有以下几点：
ul > li {
display: inline-block;
display:inline;
}
ul{
text-align: center
}
#left{
float: left
}
#right{
float: right
}
#mid{
margin-left: auto;
margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrap
浏览 5提问于2020-01-14得票数 0
回答已采纳
<body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-v
浏览 0提问于2016-08-09得票数 4
如何使html "ul“元素与水平对齐"li”在bootstrap4 (水平+垂直)中居中
<section>
<div class='row'>
<div class='col-sm'>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
浏览 3提问于2020-08-05得票数 0
1回答
引导导航栏未正确居中
、、、
我有一个使用bootstrap创建的导航栏，但由于某些原因，它并不完全居中。它偏离中心向左，我不明白为什么它不是完全居中。下面是它的代码。
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual file
浏览 15提问于2018-09-08得票数 0
回答已采纳
我有一个有三个孩子的内部div，一个按钮，一些文本和一个按钮组。
我使用flex对所有内容进行居中，但问题是文本实际上并不是围绕包含元素的中心。相反，它将文本放在按钮和按钮组的近边框之间。
文本不在黄色框中居中。我希望文本在黄色框中居中。
有没有什么方法可以说“从外部元素的边缘测量，忽略兄弟姐妹的内在边缘”？
.outer-box {
width: 100%;
display: flex;
justify-content: center;
}
.inner-box {
width: 500px;
height: 60px;
background-color:
浏览 3提问于2019-03-28得票数 1
回答已采纳
编辑: Fiddle似乎无法正确加载Twitter Bootstrap，因此我建议您将我的超文本标记语言和CSS代码复制粘贴到桌面上的一个空白.html文件中，然后使用该文件进行故障排除。请记住正确包含Twitter Bootstrap 3( CDN在下面的HTML代码中)，因为只有包含Bootstrap时才会出现问题。
这是我的小提琴/代码：
下面是小提琴中的代码：
HTML：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bo
浏览 0提问于2015-06-07得票数 1
2回答
我想水平和垂直居中放置在那里的一个链接的图标:之前。
尽管我尝试了无数次，我还是不明白为什么图标不想居中。
下面是我的html：
<ul>
<li class="item-1"><a href="">Search</a></li>
</ul>
和我的css：
ul > li > a {
font-size:0;
border-radius: 50px;
text-align: center;
height: 50px;
width: 50px;
bor
浏览 2提问于2016-02-04得票数 2
在纯CSS中，我无法在无序导航栏链接中居中或提升导航栏链接项目。 我想有导航栏的链接在块中，走到屏幕顶部，并覆盖导航栏区域的整个高度，我希望所有的项目居中。 在body上有0边距填充边框，我甚至尝试过codepen来隔离导航栏并尝试它，但它仍然不起作用。 那么如何让导航栏链接占据导航栏区域的整个高度，以及如何使导航栏项目/链接居中，因为它们稍微向右推，而不是居中。 练习：https://codepen.io/pen/ nav {
margin: 0px;
border: 0px;
padding: 0px;
position: fixed;
top: 0;
浏览 11提问于2020-07-23得票数 0
回答已采纳
我尝试在同一个页面中使用Twitter Bootstrap tabbable和Bootstrap popovers。我在解决弹出框不能超出标签限制的问题上遇到了困难(问题是当弹出框出现在边框旁边时，它是半隐藏的)。
我不是JQuery方面的专家，但据我所知，问题来自于在"iframe“中创建的选项卡，而弹出窗口不能显示在它的”iframe“之外。
有什么办法可以解决这个问题吗？(=即使在靠近选项卡的边框时也能正确显示弹出框?)
非常感谢!
下面是一个示例代码，显示了我的问题(准备复制/粘贴到.html 中)：
<!DOCTYPE html>
<head>
浏览 0提问于2012-07-05得票数 3
回答已采纳
1回答
Navbar负载崩溃，使用下载的Bootstrap 4 Alpha代码进行不正确的格式化，但使用Bootstrap 4 Alpha CDN显示得很好。使用下载的代码对此项目是必要的。
使用下载的引导带4 Alpha代码的Navbar外观：
使用引导带4 Alpha CDN (我想要的外观)的Navbar外观：
这是我的HTML，它不会改变：
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class=&
浏览 5提问于2017-08-25得票数 0
回答已采纳
我似乎无法让Watir在页面上定位link，因为它会显示另外两个fields。但是，该链接不是一个链接，而是一个作为legend的li <li>
<legend role="button" tabindex="1" id="alpha-trigger" class="trigger legend shown " aria-label="alpha Search"" for="alpha">
Alpha Search
</legend>
浏览 13提问于2020-11-11得票数 0
我将一个站点从Bootstrap 4 alpha 6迁移到Bootstrap 4 Beta 1。
<ul class="nav navbar-nav list-inline">
<li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#">FB</a></li>
<li class="list-inline-ite
浏览 1提问于2017-08-12得票数 47
我如何在一个div中将一个链接居中，这个div在Bootstrap上也有一个内联列表？即使我使用.text-center类，星型链接似乎也没有居中。
<div class="project-status text-center">
<a class="favourites" href=""><i class="fa fa-star-o"></i></a>
<ul class="mylist list-unstyled list-inline
浏览 4提问于2015-11-20得票数 1
回答已采纳
因此，我正在开发一个引导网站，可以在以下网站上看到：
页面有5个部分:主页/关于我们/服务/投资组合/请求引用。当页面在小屏幕上，导航条折叠到该菜单按钮时。当我在某些页面上时，我无法正确地选择所有的链接。例如，在主页上，当它被折叠时，一切都很正常。然而，如果我去了关于我们的部分，我只能选择“投资组合”或“请求一个引号”部分。Request部分只允许我选择“组合”部分。我觉得这很奇怪，因为除了active标记之外，我的导航条代码对于每个条形码都是相同的。
这是我的海军条码：
<nav class="navbar navbar-default">
<butt
浏览 0提问于2016-05-03得票数 1
回答已采纳
如何将所有divs对齐到同一行的中心。我的意思是，我想让按钮居中，像这样的图像，例如，社交图标居中像文本一样，而不是像我的在黑暗中
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
<div class="container d-f
浏览 38提问于2020-02-12得票数 0
回答已采纳
2回答
我有一个html页面，其中我在一个列表项中有一个div，并试图使div在列表项中居中(div的宽度小于列表项的宽度)。我的CSS看起来像
ul.my {
width: 100px;
padding: 0;
}
li.my {
list-style: none;
}
div.content {
text-align: center;
display: table-cell;
vertical-align: middle;
}
HTML有一个代码片段，看起来像这样
<li class="my"><div clas
浏览 3提问于2012-11-02得票数 0
回答已采纳
有人知道如何在Bootstrap 4 Alpha 6更新中对齐'list-group-item‘吗？我可以将text-center添加到卡片本身，它将卡片标题和链接集中对齐，但是列表组不会移动。
我已经尝试过mx-auto类，它将文本居中移动，但是边框缩小到只适合文本，所以看起来不合适
。
这是我一直在测试的代码：
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card ima
浏览 0提问于2017-01-29得票数 3
回答已采纳
2回答
你好，我想把我菜单下的那条线居中，我用一个伪元素创建了这条线。
这是html：
.nav-link.active {
color: #482683;
font-size: 14px;
}
.nav-link.active::after {
content: '';
display: block;
width: 22px;
height: 2px;
background: #482683;
margin-top: 27px;
}
<link rel="stylesheet" href="https://stack
浏览 2提问于2020-11-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
