在div中使用居中按钮正确放置6列时出现问题
的原因可能是由于布局或样式设置不正确导致的。以下是可能的解决方案：
- 使用Flexbox布局：将父容器的display属性设置为flex，然后使用justify-content属性将子元素水平居中。同时，设置子元素的flex属性为1，使其平均分配父容器的宽度。
<div style="display: flex; justify-content: center;">
<div style="flex: 1;">Column 1</div>
<div style="flex: 1;">Column 2</div>
<div style="flex: 1;">Column 3</div>
<div style="flex: 1;">Column 4</div>
<div style="flex: 1;">Column 5</div>
<div style="flex: 1;">Column 6</div>
</div>- 使用Grid布局：将父容器的display属性设置为grid，然后使用grid-template-columns属性将子元素平均分配父容器的宽度。
<div style="display: grid; grid-template-columns: repeat(6, 1fr);">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
</div>- 使用float属性：将子元素设置为浮动，并设置宽度为16.66%（100%除以6列），然后使用clear属性清除浮动。
<div>
<div style="float: left; width: 16.66%;">Column 1</div>
<div style="float: left; width: 16.66%;">Column 2</div>
<div style="float: left; width: 16.66%;">Column 3</div>
<div style="float: left; width: 16.66%;">Column 4</div>
<div style="float: left; width: 16.66%;">Column 5</div>
<div style="float: left; width: 16.66%;">Column 6</div>
<div style="clear: both;"></div>
</div>以上是三种常见的解决方案，根据具体情况选择适合的方法。如果问题仍然存在，可能需要检查其他样式或布局设置是否干扰了列的正确放置。
相关·内容
1回答
我正在做一个角度材质选项卡来改变我的应用程序的不同自定义类型，我想在该选项卡中放置6个居中按钮，但我遇到了问题，因为它们没有居中，当我尝试这样做时，它们被水平放置。
<div class="column"></div>
<d
浏览 7提问于2020-05-19得票数 0
5回答
为什么放置在flex容器中的按钮通过使用margin : 0px auto;来居中，而放置在普通容器中的按钮却不是？另外，我能做些什么来使按钮在普通容器中居中(我不能更改我的HTML，所以最好是CSS解决方案)。} background: green;b
浏览 14提问于2016-05-02得票数 2
回答已采纳
3回答
如何在动态div中垂直对齐按钮
、、、、
我想使用bootstrap在div中居中放置垂直对齐的按钮 <div class="col-xs-2">
<button class="btn<i class="fa fa-arrow-left" data-ng-click="onClickBack()&qu
浏览 1提问于2013-10-29得票数 13
3回答
我想将两个按钮居中放置在页面的中心。以下是我的代码。它只将btnExport居中，而不是btnReset居中，它始终保持在左侧。当我在行级尝试向右拉或向左拉时，两个按钮都正确地向左或向右移动！<div class="row" style="padding-right: 18px; margin-left: auto; margin-right: auto"
浏览 19提问于2016-08-20得票数 0
回答已采纳
2回答
我想在jquery的文档体中居中放置一个div。
我有一个阅读更多的按钮，当你点击它时，它会显示一个额外的div，我希望移动窗口位置围绕这个div居中。
浏览 0提问于2010-03-26得票数 1
回答已采纳
4回答
定位按钮
、
我将页面中的元素以如下为中心：margin-left: auto;但是当我尝试用一个有两个按钮的div来做这件事的时候，为什么呢
浏览 15提问于2022-10-16得票数 -1
回答已采纳
2回答
我已经在页面上放置了一些文本和一个按钮。我目前正使用我所知道的传统css方法将其居中。这是在IONIC 2中居中的正确方式吗？<ion-content padding class="login-signup">
SOME-TEXT
</<
浏览 0提问于2016-06-28得票数 8
回答已采纳
1回答
我有一个flexbox里面的一排图像，内容居中对齐，项目居中对齐；即内容应该垂直和水平居中。 所有的图片看起来都很棒，直到我去把这些图片包在标签里，让它们可以点击。在下面的图片中，我在图片后面放置了一个彩色div，以使它们更容易查看： This is how it looks with all the images wrapped in links This ishow it looks with 2 images (UK and France) "unwrapped"
浏览 22提问于2020-03-28得票数 0
回答已采纳
1回答
我们有外部div header，它有100%宽度的容器。div用于标题文本和右边的按钮。文本必须居中到header，并且按钮必须在右侧。但是如果文本足够长，可以与按钮重叠，那么文本应该填充header的左侧，而不是继续按钮。button]]header -> [[abcdabcdab CENTER TEXT cd][button]]
将其作为中心文本的子项放置时，
浏览 7提问于2015-12-06得票数 2
我一直在使用appendChild将元素添加到页面中，但我并不总是对它们的结尾感到满意.有人能向我解释怎么把元素放在我想要的地方吗？例如：places ( zNode是某种官方语法，还是像每个人一样使用'i‘作为循环中的变量？)在桌子底部..。例如..。在上，我如何将按钮放在显示多少成就和表顶之间？
我如何将某物附加到图像或其他元素的上方、下面
浏览 3提问于2013-11-15得票数 0
回答已采纳
1回答
中心引导下拉菜单
、、
下拉菜单按钮居中时出现问题。我在ASP.NET MVC 5中使用bootstrap。下面是html代码： <ul class="nav navbar-nav">div。它的类名是"navbar-center“，我可以使用填充，这样就行
浏览 1提问于2014-05-29得票数 0
我正在使用基础类库。我想在ReactJS中居中放置一个div，但我无法实现。</span></div> <a class="button" href="#">Test Button</a>
</div>
浏览 5提问于2015-07-21得票数 0
我想要一个UILabel，有一个按钮在它的右边，水平居中，就像图片一样。我已经为标签和按钮之间的UILabel和标准空间实现了一个“按水平中心对齐”，它通常工作得很好。当UILabel的文本很长且超出界限，按钮甚至不可见时，就会出现问题。因此，问题是如何使UILabel：
水平居中</
浏览 2提问于2016-02-23得票数 0
回答已采纳
我创建了一个标题栏，并希望在那里放置3个项目。第一个应该在左边对齐，第二个在标题的中间，第三个在右边。flex-direction: row; justify-content: space-between; <div"headerEle" href="https://www.google.de/">Google</a>
&l
浏览 3提问于2017-12-14得票数 1
回答已采纳
1回答
我正试图在中间对齐我的按钮。现在我想要的文本在我的按钮旁边，并且是居中的。我一直在尝试在每一种可能的组合中放置行，我也尝试过以各种方式对行进行居中，但却无法正确地完成。目前，我不得不使用<br>来使所有这些都保持在同一行。但一定有办法解决我错过的问题。如果我试图删除pull-right，它只是更改行，而不是将自己放置在按钮旁边。代码：
浏览 2提问于2014-06-19得票数 0
回答已采纳
background-color: black; padding: 0;} display: none; div#instructions { color: white; opacity: 0.6;
浏览 12提问于2017-03-15得票数 1
回答已采纳
1回答
蓝色部分是主标题文本div，粉红色部分是应该放置在容器div右侧的按钮。
问:如何将标题文本居中，所以它将是容器div的中心，而不是蓝色部分的中心？我的问题是，当我给出粉红色按钮的位置:绝对；该按钮保持浮动时，滚动。
浏览 0提问于2022-11-23得票数 -1
回答已采纳
1回答
我在父服务器内部有一个子div，其样式如下，即使父服务器具有定义的居中宽度，也会强制它达到完整的浏览器宽度。slider-controller position: absolute; left: 0; top: 100; 我有一个名为Metaslider的插件，它在这个子div中打印一个完整的浏览器宽度幻灯片。当我将内容放置在父div中时，就会
浏览 6提问于2017-02-18得票数 0
回答已采纳
我想做一个按钮，就像一样，帮助按钮在右边，点击一下，新的框就打开了，留下了内容。如何从头做起。
浏览 0提问于2012-07-19得票数 0
回答已采纳
我想，我已经破解了，但现在不能让按钮保持中心位置。我已经包含了一些简化的代码，并取出了其他面板(我使用JLayeredPane，因为有5个面板，而不仅仅是显示的一个)。如果我在JLabel的其他地方使用StackOverFlow，我就看到了解决这个问题的方法，但是还没能解决这个问题。任何帮助都将不胜感激。好像我错过了一些很简单的东西。
浏览 1提问于2013-12-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
