英文:
Center align text in Bootstrap button
问题
我在尝试将文本居中放置在Bootstrap按钮内时遇到了困难。以下是我尝试过的代码：
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px; margin-bottom: 150px; font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html">浏览所有列表</a>
</div>
结果如下图所示：
有关如何解决这个问题的提示吗？
英文:
I have a hard time centering the text inside a Bootstrap button. Here is what I tried
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>
<!-- end snippet -->
The result is shown in picture:
Any tip on how to fix that?
答案1
得分: 0
将style="text-align: center;"添加到容器 div。
<div class="d-grid gap-2 col-6 mx-auto" style="text-align: center;">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px; margin-bottom: 150px; font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html">浏览所有列表</a>
</div>
英文:
Add style="text-align: center;" to the container div.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<div class="d-grid gap-2 col-6 mx-auto" style="text-align: center;">
<a class="btn btn-primary d-flex align-items-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; text-align: center; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
</div>
<!-- end snippet -->
答案2
得分: 0
你可以使用一个充当链接的按钮。
<button class="btn btn-primary"
style="height: 200px; margin-bottom: 150px; font-size: 3rem; font-weight: bold;"
onclick="window.location.href = 'all-listings.html';">
浏览所有列表
</button>
英文:
You can use a button that acts as a link instead.
<button class="btn btn-primary"
style="height: 200px; margin-bottom: 150px; font-size: 3rem; font-weight: bold;"
onclick="window.location.href = 'all-listings.html';">
Browse All Listings
</button>
答案3
得分: 0
Bootstrap按钮默认情况下已经将它们的文本居中对齐，所以你只需应用btn btn-primary类，就可以了。不需要添加任何其他内容，只需确保你没有用自己的样式覆盖Bootstrap的样式。
有关更多信息，请查阅Bootstrap官方网站上的文档（https://getbootstrap.com/docs/4.3/components/buttons/）。
英文:
Bootstrap buttons already have their text centered by default so you should be able to just apply the class btn btn-primary and it should do. No need to add anything else, just check that you're not overwriting the bootstrap styles with your own styles.
For more info check the documentation on the bootstrap website.
答案4
得分: 0
<a class="btn btn-primary text-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; font-weight: bold;" href="all-listings.html"> 浏览所有列表</a>
[您可以在Bootstrap内使用文本实用工具][1]
[1]: https://getbootstrap.com/docs/5.3/utilities/text/
英文:
<a class="btn btn-primary text-center" type="button" style="height: 200px;margin-bottom: 150px;font-size: 3rem; font-weight: bold;" href="all-listings.html"> Browse All Listings</a>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论