按钮文本在laravel和BOOTSTRAP4中居中不正确
在Laravel和Bootstrap 4中，要实现按钮文本的居中对齐，可以使用CSS来设置文本对齐方式。以下是解决这个问题的步骤：
- 首先，确保你已经正确引入了Bootstrap 4的CSS文件和相关的JavaScript库。
- 在HTML代码中，将按钮放置在一个具有class属性的容器中，例如<div class="text-center"></div>。这将帮助我们使用Bootstrap的文本居中样式。
- 在该容器中，添加一个按钮元素，例如<button class="btn btn-primary">按钮文本</button>。
- 现在，我们需要添加自定义的CSS样式来确保按钮文本在居中对齐。可以通过以下几种方式来实现：
- 内联样式：直接在按钮元素上添加style属性，例如<button class="btn btn-primary" style="text-align: center;">按钮文本</button>。
- 样式表文件：在项目的样式表文件（如style.css）中添加以下CSS规则：
- 样式表文件：在项目的样式表文件（如style.css）中添加以下CSS规则：
- 然后，在按钮元素上使用text-center class属性，例如<button class="btn btn-primary text-center">按钮文本</button>。
- 内部样式表：在HTML文件的<head>标签中使用<style>标签添加以下CSS规则：
- 内部样式表：在HTML文件的<head>标签中使用<style>标签添加以下CSS规则：
- 然后，在按钮元素上使用text-center class属性，例如<button class="btn btn-primary text-center">按钮文本</button>。
- 通过以上步骤，你应该能够在Laravel和Bootstrap 4中正确地居中对齐按钮文本。
需要注意的是，以上解决方案假设你已经正确地引入了Laravel和Bootstrap 4的相关文件，并且在项目中已经使用了这些框架。如果还没有引入相关文件或者使用其他版本的Bootstrap，则可能需要进行适当的调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 腾讯云无服务器云函数 SCF：https://cloud.tencent.com/product/scf
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 物联网开发平台 IoT Explorer：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送 TPNS：https://cloud.tencent.com/product/tpns
- 对象存储 COS：https://cloud.tencent.com/product/cos
- 区块链服务 BaaS：https://cloud.tencent.com/product/baas
- 腾讯云游戏多媒体引擎 MTP：https://cloud.tencent.com/product/mtp
相关·内容
我的laravel应用程序中有一个按钮 <a href="{{ url('/product') }}" class="btn btn-default px-5 mt-3 rounded subscribe" role="button">{{ __('More info') }}</a> 所以我需要按钮文本在按钮中居中。但当前<e
浏览 10提问于2020-04-21得票数 0
回答已采纳
我正在使用附加的CSS和代码，我的<li>的高度被搞砸了。当使用bootstrap 4时，它太短了，但是在3.3.7中它可以工作。使用4“时的问题是什么？
Bootstrap 4有这样做的好方法吗？我在Bootstrap 3中找到了多个示例，不是4而是4。任何示例都将不胜感激。
浏览 51提问于2019-05-14得票数 1
回答已采纳
这个问题在这里已经有答案了 ： 如何在div块中居中(水平和垂直)文本？ (27个答案) Bootstrap 4中的垂直对齐中心 (15个答案) 3天前就关门了。我正在尝试得到3个按钮与bootstrap4的一个大的在左边，和两个小的一个在另一个在另一个在右边，并正在与btn-组这样做。我希望左边的大按钮占据整个列(即其他两个按钮顶部的高度之和)，并使所有<e
浏览 33提问于2021-02-27得票数 -2
回答已采纳
如果你转到，你会发现(carousel)图像下面的文本是右对齐的，而它应该是居中对齐的。
但是，如果您单击left & right按钮来导航旋转木马，文本将居中对齐。此外，左按钮和右按钮的对齐不正确。它应该在点的右边。它可以在FF中工作，但不能在IE中工作。
浏览 0提问于2011-03-08得票数 0
1回答
如何使actionButton及其标签变小，但仍居中于按钮图标？我已经能够使按钮和文本变得更小，但结果是一个小按钮和小文本没有居中。我想我可能是不正确地处理这个问题。这是一个按钮/文本变小的例子，但结果是一个文本没有居中的按钮。
浏览 2提问于2015-10-13得票数 11
回答已采纳
3回答
我想知道，当涉及到在标题框中对齐文本("CONSOL概述“)而不是在标题框中左对齐时，是否有人可以帮助解决这个问题。我尝试过"align-content: center“和"text-align: center”，但似乎不起作用。感谢您的任何帮助html代码中的部分是这样的：
<div class="container-fluid" style="padding-top
浏览 0提问于2018-10-20得票数 1
7回答
如何在android中居中显示按钮上的文本？我尝试设置填充为0，重力为中心，但当我运行它时，结果仍然是文本水平居中，而不是垂直。文本被稍微移到了底部。="@drawable/layout_button_different" android:width="70dp" />
我也是相关的:在活动中</
浏览 0提问于2012-06-11得票数 29
回答已采纳
1回答
我试图将一堆放在容器中的文章放在中心。我目前正在容器上使用带有css float: none;的辅助类center-block，但它没有将它居中。我曾尝试将center-block放在实际的col-md-10文章容器中，但这导致了类似三角形的效果。
浏览 2提问于2017-11-25得票数 0
我想让我的文本字段有一个清晰的按钮。我找到了一个如何使用装饰添加它的示例，但它的位置完全不正确。如何调整图标的位置？谢谢!
...
浏览 5提问于2019-07-11得票数 1
我需要居中的标题文本，而不是重叠的按钮在任何一边。目前我已经让标题在侧边按钮之间居中，但由于它们的宽度不同，所以标题不在父视图中居中。这是它当前的样子(在两个按钮之间居中，而不是在父按钮中居中)：有没有办法使标题在父级中居中，同时确保它不会与两侧的按钮文本重叠(因为这是可以改变的)
浏览 23提问于2019-06-12得票数 4
3回答
我试图让我的文本框多行，同时保持设计。我是HTML/CSS的新手，所以请让我知道你是如何做到这一点的。
此外，我还试图将按钮放在底部文本框的中心。
浏览 0提问于2014-08-28得票数 0
我有一个按钮，当点击一个活动指示符出现在按钮内，指示灯应该只是前面按钮的文本。我试过添加这个约束，但它没有任何效果。这个约束是否不正确，应该是什么？leadingAnchor.constraint(equalTo: activityIndicator.trailingAnchor)
故事板中存在一个约束，可以将按钮中的活动指示符水平地居中。
浏览 1提问于2020-03-16得票数 0
回答已采纳
7回答
如何使用界面生成器在UIButton中逐行居中显示文本？我正在寻找各种选择，就是看不到它。这是按钮：
浏览 0提问于2012-01-27得票数 38
回答已采纳
8回答
尝试在td中居中对齐按钮
、、、、
我在td中找不到按钮的中心。我试着用按钮在td上设置“水平对齐:居中”，但似乎没有应用。该按钮仍然向单元格的左侧倾斜。
浏览 99提问于2014-03-14得票数 39
回答已采纳
在我的项目中使用按钮时...它们公开一个名为TextImageRelation的属性。它用于告诉控件将按钮图像与文本相关的位置(我使用的是ImageBeforeText选项)。现在，我需要将文本居中对齐。但不是..。文本与图像对齐或居中对齐，但不考虑图像(
浏览 2提问于2010-12-03得票数 1
回答已采纳
1回答
用户单击一个按钮(网页上的所有内容都已居中，包括该按钮)，该按钮将返回一些文本。</p>
<p id="demo"></p>我正在尝试做的是让输出(Hello world)也在页面上居中然而，在我的原始代码中</
浏览 0提问于2017-09-24得票数 0
我正在制作一个QMessageBox，在弹出窗口中居中显示文本和按钮时遇到了问题。
有没有一种居中文本和居中按钮的方法？
浏览 479提问于2021-05-11得票数 3
回答已采纳
2回答
嗨，伙计们，我有一个简单的图片，然后我有一个按钮，重叠它和它在所有平台上工作良好，但由于某种原因，它不工作在IE或我的iphone当我启动我的网站。按钮就在图片的右边，我不知道为什么IE会这样做，但是如果有人能帮我修复这个错误，那就太好了。display: flex; justify-content: center;再一次，这在谷歌，铬和手机等
浏览 3提问于2017-10-24得票数 0
回答已采纳
2回答
我在div中创建了一个登录表单(我更喜欢使用表格-请忽略值中的php )。问题是，我的“提交”和“创建新帐户”表行/数据仅与不是输入字段的表数据相关。我希望最后两行相对于整个用户名和密码行居中。如何才能使最后两行居中？我试着用这些特定的行创建一个新的表，并将它们居中，没有什么不同。任何意见都将不胜感激。HTML：
<!
浏览 4提问于2015-05-22得票数 0
在Firefox中，'A‘显示在中间，而在Chrome/IE上则不显示：注意:以下结果是相同的：
<button type="button" style="width:24px;">A</but
浏览 29提问于2010-05-21得票数 43
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
