使用css和bulma使按钮在表格中居中
使用CSS和Bulma使按钮在表格中居中的方法如下：
- 首先，在HTML中创建一个表格，并在表格中的某个单元格中添加一个按钮，例如：
<table>
<tr>
<td>
<button class="button is-primary">按钮</button>
</td>
</tr>
</table>- 在CSS中，使用flex布局和Bulma的类来实现按钮在表格中居中。添加以下样式：
table {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
td {
display: flex;
justify-content: center;
align-items: center;
}- 确保在HTML中引入了Bulma的CSS文件，例如：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">这样，按钮就会在表格中水平和垂直居中显示。
关于Bulma的更多信息和使用方法，可以参考腾讯云的产品介绍链接地址：Bulma - 腾讯云
相关·内容
1回答
我正在使用Bulma作为CSS框架来设置我的angular应用程序的样式，目前，我有一个如下所示的表格： 📷 我试着让它看起来更像这样： 📷 如何使按钮居中并使表格看起来尽可能靠近这个按钮？ 下面是我使用的代码： <table
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
>
<thead>
<tr>
浏览 40提问于2021-03-31得票数 0
回答已采纳
1回答
当HTML表格比页面正文宽时，无论您是否指定居中对齐，它始终左对齐。我有一个包含CSS3渐变按钮的表格，它的大小不容易预测(按钮的大小取决于浏览器使用的字体)。在某些浏览器上，此表变得比页面正文更宽，从而导致该表变得与页面横幅不相关。
我读过这样的问题：指出，在这种情况下，将表格居中的唯一方法是使用Javascript。
但是我希望找到一个没有javascript的解决方案。页面设计非常简单(只需在页眉居中显示网站徽标，下方有一系列大按钮)。
你有什么建议可以简单而优雅地解决这个问题，使按钮表格始终在页面中居中？
浏览 2提问于2013-09-25得票数 1
2回答
如何表达"Hello World!“文本是否始终位于图像的右侧和底部？它是一个纯粹的CSS/flexbox解决方案，还是Bulma本身提供了一个类来实现这一点。另外，我应该使用<p>标签吗？或另一个用于此目的的标记？因为当前如果您运行代码片段(在整个窗口中)，您会看到文本已经在右侧，但它垂直居中，而不是在底部
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div cla
浏览 0提问于2018-05-31得票数 0
2回答
按钮右上角
、、
使用Bulma框架，我试图在图像的右上角放置一个按钮，但它只显示在图像的底部。我试着使用合理性内容和flex，但是按钮仍然在底部。
.justify-content-start {
align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<figure class="image is-128x128">
<img
浏览 2提问于2018-05-31得票数 1
回答已采纳
1回答
我在用Bulma做我的项目。
基本上，我试图使用Bulma将文本和图像(height: 25em)内联。但这不会发生的。
到现在为止，我试过这个：
.img-cont {
width: 50%;
float: left;
}
img {
height: 25em;
}
.clearfix {
clear: left;
}
.content {
float: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" typ
浏览 0提问于2018-04-13得票数 3
回答已采纳
我似乎不能覆盖我正在使用的Bulma CSS中的类：
这是bulma中components/navbar.sass中存在的类，我想要覆盖它
.navbar-menu
margin-right: -.75rem
我试着把边距设置为0，这样我就可以拿回12个像素，所以它可以居中，但似乎不起作用。，。
你可以看到边距-右下角有12个像素的框，如果我在那里得到0个像素，我的菜单居中。
我如何覆盖它？
注意:在我的示例中，对导航栏的响应不起作用，您必须扩展它，或者直接转到那里：
浏览 9提问于2021-05-15得票数 0
回答已采纳
2回答
如何使用Bulma中的默认$变量
、、、、
我三天前就开始了我的编码之旅，所以这对我来说是一个全新的维度。我开始掌握html和css的诀窍，在我试图设计的网站上。
我在我的站点上使用Bulma CSS框架，我在使用它们的变量：时遇到了困难。
这些变量只能在SASS中访问吗？我设置了SASS，所以我的scss文件更新了我的css文件，但是我的scss文件没有以任何方式与Bulma关联，所以我会得到“变量是未定义的”，这是有意义的。因此，我假设我必须将Bulma变量导入到scss文件中，但如何导入？
我就是这样在html的"head“中安装css的。
<link rel="stylesheet" href=&#
浏览 10提问于2017-10-04得票数 4
回答已采纳
2回答
我使用Bulma css，并希望使按钮的大小相同。目前，每个按钮有不同的大小取决于按钮标题。
我发现的唯一选择是“全宽”，但那太大了。
有人能帮我吗？
浏览 10提问于2022-07-17得票数 0
回答已采纳
我正在使用bulma-calendar，我想让日历水平居中。我想我几乎尝试了所有以.has-text为中心、.is为中心、空列为辅助的组合……不知何故，我做不到这一点。如果能给点提示我会很感激的。谢谢 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0&
浏览 3提问于2020-11-10得票数 0
回答已采纳
我有一个Vus.js项目，我想添加bulma框架和/或buefy。
我运行了npm install bulma和npm install buefy
在main.js中，我有：
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
在App.vue中，我还尝试使用以下命令加载bulma：
<style lang="css">
@import '../node_modules/bulma/css/bulma.css';
在assets
浏览 0提问于2018-12-23得票数 0
如何使我设置的jsFiddle中的按钮居中，使按钮在导航栏内和导航栏外的间距相等并居中？
我尝试过不同的方法，例如
display:inline-block;margin:0 auto; text-align:center;
但是我不能让它工作。
如果你能给出一点解释，而不是像我想学的那样，只是修复CSS，这样我就不必一直回到这里。
编辑：
就像它们在这里居中一样^。
浏览 1提问于2013-08-07得票数 11
回答已采纳
在一个Bulma css导航栏-项目，我想有一个居中的图标，并在这个图标下一些文本。
<nav class="navbar " role="navigation" aria-label="main navigation">
<div class="navbar-menu navbar-end" id="navMenu">
<a class="navbar-item">
<p><i class="far fa-com
浏览 10提问于2018-02-20得票数 1
回答已采纳
1回答
我正在学习Sass并尝试自定义Bulma CSS框架。我正试着把它弄成紫色，但它不管用。
我已经运行npm并安装了Bulma和节点-sass。
我的sass文件：-
@import "node_modules/bulma/bulma";
$purple: #8A4D76;
$primary: $purple;
body {
background: aquamarine;
margin: 0;
}
package.json文件的脚本部分：-
"scripts": {
"test": "echo \"Error:
浏览 2提问于2021-08-12得票数 1
回答已采纳
我的表视图单元格中的按钮和标签一个接一个地垂直放置。
在我的xib设计中，我放置了我的按钮，然后在它下面放置了我的标签。
如果标签的字符串为空，那么我想将按钮设置为在表格视图单元格中垂直居中，并隐藏标签。
如果我已经尝试了下面的代码，但是按钮没有垂直居中位置。
if([labelString isEqualToString:@""]){
_label.hidden = YES;
_button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
}
如果能得到解决这个问题的建议将
浏览 0提问于2017-03-31得票数 0
3回答
我正在尝试在Javascript中居中按钮，以便它在页面中水平居中。现在，我的按钮在html文件中，所以我不知道如何使用CSS将其居中，因为它在Javascript中。 TLDR:在Javascript中，如果我声明了一个按钮btn，我应该写什么代码来水平居中它？ 我在互联网上到处寻找一种使用Javascript使按钮居中的方法，但都无济于事。我希望你们都能帮助我。 谢谢!
浏览 501提问于2021-06-26得票数 0
回答已采纳
2回答
我刚刚开始用Bulma建立我的博客原型。有一个footer部分，其中包含两个平均划分的列。
我想要这三个项目(推特、电子邮件等)在黄色区域垂直居中。在布尔马有专门的课程吗？
(请参阅完整的。)
<footer class="footer" style="background-color: lightpink;">
<div class="columns">
<div class="column has-text-centered-touch" style="bac
浏览 0提问于2017-11-02得票数 7
回答已采纳
2回答
我试图使我的网页响应，我想在移动版本的网页，以改变一个按钮的宽度，以占据整个页面的宽度。桌面版本应该是这样的：
这就是移动版本，它应该是什么样子：
我不知道如何改变我的按钮，这样它就可以使用凸包来参与所有的屏幕宽度。这是我的密码：
<div className="buttons mt-6 mx-4 is-justify-content-space-between">
<button className="button has-background-link has-text-white has-text-weight-b
浏览 0提问于2020-11-18得票数 0
回答已采纳
我想要一个五分之三宽的部分，它将是中心的。一开始，当我只有“部分”时，内容是水平居中的，但它占用了整个屏幕的宽度。所以我添加了一个列的父div，列的是-五分之三。现在我有一个五分之三宽但不是中心的部分，那么最好的方法是什么呢？
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<
浏览 1提问于2018-05-31得票数 4
回答已采纳
我想添加'bulma-helpers‘到我的HTML没有npm和纱线，所以我下载了文件( css /bulma-helpers.css，bulma-helpers.css.map，bulma-helpers.min.css)并放在我的css文件夹中。 我使用了链接标签。 <link rel="stylesheet" href="css/bulma-helpers.min.css"> 但是，我不能在bulma-helpers中使用任何类。 如何在没有npm和纱线的情况下添加它？ (链接：https://github.com/jmaczan/b
浏览 17提问于2019-09-28得票数 0
回答已采纳
1回答
使用项目，在tiles中填充产品数据(到产品详细信息的活动链接)，并希望最后一个瓷砖具有文本"Add“并在其下面以垂直和水平的居中。
我试过：
tilecombinations 在a，div，h4上添加has-text-centered类；从div中删除内容类；删除父链接a标记，以防它与上面的混淆；<code>G 215</code>
备注：
plus图标以h4为中心。(怎么回事，为什么？)I用内联方式寻找垂直对中的答案：style="display: flex; flex-wrap: wrap; align-content: center; align
浏览 1提问于2022-07-25得票数 1
回答已采纳
3回答
使用Bulma css创建网站。在列表项目中使用ul > li的类别列表。尝试获取类似于图像1的列表项
我的解决方案不是让桌面和移动设备居中对齐，如图2所示
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<div class="categories">
<h3>category</h3>
<di
浏览 3提问于2019-12-06得票数 0
2回答
我是Bulma Framework的新手。我已经开始在我的HTML文件中执行以下操作。我还没有安装任何软件包。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<section cl
浏览 0提问于2018-07-26得票数 1
3回答
我收到一个错误，安装Bulma后，通过浏览器检查器可以看到。
我有角-10。
我所采取的步骤是
npm -i bulma.bulma目录位于node_modules/bulma中。
@creativebulma/bulma-collapsible npm i -D
在angular.json中加载javascript
"styles"：“src/styes.css”，"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"，“./node_node/bulma/css/bulm
浏览 11提问于2020-07-23得票数 1
回答已采纳
1回答
这些CSS属性使任意大小的图像在任意大小的容器中居中显示：
display:table-cell;
text-align:center;
vertical-align:middle;
这是一个完美的流体图像居中，然而，表格单元格属性在底部给了我不想要的空白。如何避免呢？请看以下内容：
浏览 0提问于2012-05-08得票数 1
回答已采纳
我正在尝试使用ng serve命令启动角。
我立刻遇到了下面的问题
在多个./src/penes.scss./node_ Module /bulma/css/bulma.css模块中未找到错误:错误:无法解析C：\client\ngpop中的“C：\client\node_modules\bulma\css\bulma.css”
我可以确认bulma.css存在于该位置。
任何想法
浏览 2提问于2019-02-07得票数 3
回答已采纳
1回答
我刚刚开始使用RStudio (0.98.1103，OS )中的printr包()。在生成PDF (Knit PDF按钮)时，它可以很好地生成格式良好的(居中)表格。使用Knit HTML时，不管有多少列，表格都会分布在页面的整个宽度(浏览器或查看器)上--我希望表格居中显示，因为它们出现在printr vignette ()中。这是一个CSS问题，还是我错过了一个简单的“技巧”？
谢谢
浏览 1提问于2015-04-27得票数 1
2回答
我使用Bulma框架作为我的网页的css。我正在使用tiles功能来设计我的页面。我似乎找不到如何在磁贴中居中元素。
我在bulma.css文件中编写了一个'center‘类，如下所示：
.center{
left : 40%;
right : 20%;
}
这似乎确实适用于我正在导入的图像：
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child ">
浏览 0提问于2018-07-18得票数 3
2回答
我在用Bulma。考虑以下HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
<a href="/login
浏览 5提问于2020-04-19得票数 0
回答已采纳
我在一个Angular 8项目中使用了Bulma.io，并使用以下命令安装了Bulma：npm install bulma。之后，我在我的angular.json文件中包含了这些样式：
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
浏览 21提问于2019-08-13得票数 3
我在试斗牛。我想要的是点击。
这是头部部分：
<head>
<meta charset="UTF-8">
<title>Button loading in Bulma</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapc
浏览 1提问于2017-11-23得票数 1
我这里有一个jsFiddle，请在Internet Explorer和其他主要浏览器中打开：
现在，在jsFiddle中，只需单击“添加问题”按钮，它将在下面追加一行。在行中它显示了两个按钮，一个称为"Select All Answers“，另一个称为"Remove All Answers”。
现在，在主浏览器中，按钮在表格中居中，这很好。但在Internet Explorer中，它不是居中的，它仍然靠左对齐。是否有一段代码导致它不在Internet Explorer中居中，或者我是否需要添加一些东西才能使其在Internet Explorer中居中？
我尝试过float:c
浏览 0提问于2012-12-27得票数 4
回答已采纳
我使用bulma作为我的主页的CSS框架。然而，有一个插件是使用引导和引导可编辑的，所以我正在寻找一个解决方案，我可以添加bootstrap.css和引导编辑. can而不破坏我的布局。
<html>
<body>
<!-- header designed with bulma -->
<!-- left column menu designed with bulma -->
<div class="column>
<table class="table-responsive">
...
</
浏览 4提问于2021-01-30得票数 0
我想显示的图像和页脚，以始终适合浏览器窗口-没有滚动。为了适合图像，应该在保持比例不变的同时调整图像的大小。页脚应始终位于底部，图像应填充其余空间。我认为这应该很容易通过bulma实现-但到目前为止我还不能让它工作。英雄布局不是使用bulma实现这一点的正确布局吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, ini
浏览 1提问于2018-10-31得票数 1
1回答
我使用Bulma作为我的CSS框架，虽然试图使用他们的模态，但它们根本没有样式，好像我遗漏了什么。 ? 覆盖在那里，x按钮似乎在适当的位置和可见，但内容是灰色的。 我使用的是以下代码： <body>
<div id="modal-id" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
Any oth
浏览 25提问于2020-04-26得票数 1
回答已采纳
2回答
我正在使用CSS框架Bulma (第一次)，虽然我的问题可能不是Bulma的具体问题，但我想我应该包括这一点，只是清楚。
我有一个导航栏，有一个中心的链接集，但也对齐元素。这是一个截图：
你可以忽略左边固定的叶子。我想知道如何使购物车和登录按钮正确地对齐，同时使其他位中心对齐。
这是我尝试过的一个。我只是不知道正确的方式，使汽车和登录权对齐。我的意思是我可以定位绝对的，但这听起来很傻。
HTML代码
<nav class="navbar is-fixed-top">
<a href="">Products</a>
浏览 0提问于2018-12-28得票数 0
回答已采纳
1回答
我有一个运行bulma框架的rails 6应用程序。
Bulma随yarn一起安装，并随app/assets/stylesheets/application.scss导入
工作正常！
我用纱线安装了bulma-extensions，并尝试了不同的方法，但都无济于事……
按照文档导入：
@import 'bulma/bulma';
@import '~bulma-extensions/bulma-switch';
或
@import 'bulma/bulma';
@import '~bulma-switch';
两者都给出了一个来自
浏览 1提问于2020-12-16得票数 0
这个问题可能非常愚蠢和重复，但我找不到一个有效的解决方案。如果这个问题已经在其他地方得到了回答，我很抱歉。
我想要做的是在一个项目中使用2个css框架。
我必须使用语义作为我的主要css框架-这必须是全球可访问的。例如，具有"ui grid“类的元素应该使用semanticUI的"ui grid”行为。
但是，我想使用Bulma作为我的辅助框架。为了避免冲突，我想给所有Bulma类加上一个静态前缀。例如，bulma的"modal“类将可以作为"bulma-modal”访问。如下所示：
.&bulma {
@import '~bulma
浏览 0提问于2016-10-18得票数 8
2回答
在使用Nuxt和Buefy时，如何自定义Bulma变量？
看起来Nuxt在加载我的Sass vars之前正在加载Bulma/Buefy，在那里我设置了我的自定义值。
nuxt.config.js
export default {
target: 'static',
head: {},
css: [
'~/assets/bulma-vars.sass'
],
plugins: [],
components: true,
buildModules: [
'@nuxt/typescript-build',
浏览 2提问于2021-07-16得票数 1
1回答
我使用的是Rails、Bulma css框架和pagy gem。
<nav class="pagination">
<span class="" style=" margin-left:auto; margin-right:auto; font-weight:700;" >
<%== pagy_prev_link(@pagy, '‹ Previous', ' id="" class="pagination-link " style="" &#
浏览 2提问于2021-05-25得票数 0
1回答
我在vue cli 3项目中使用bulma，并且在index.js下包含了bulma导入，如下所示 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma'; 然后，我在各个组件的style标记中指定了css。加载页面时，可以看
浏览 54提问于2021-04-24得票数 0
回答已采纳
1回答
我已经搜索和尝试了很多，但我不能让sass使用默认编译器的角2。
我导入了框架(Sass)，如下所示：npm install bulma。然后，在styles.css中，提供了一个新的角2安装：
@import "bulma";
但我收到了很多错误：
styles.css:3Uncaught Error: Cannot find module "-!./../node_modules/css-loader/index.js?sourcemap!./bulma"(…)
我怎样才能让这个工作！？
浏览 4提问于2016-11-21得票数 1
回答已采纳
3回答
我试图使用CSS在表格中对图像进行居中。Stackoverflow还有其他存在相同问题的问题，并使用margin:0 auto, text-align:center和/或display:block解决了它们。这些都没有强迫<img>在我的表格单元格中居中。
浏览 4提问于2015-08-28得票数 0
回答已采纳
我正在尝试将导入到我的GatsbyJS项目中，但我在使其正常工作方面遇到了很多困难。我正在使用同样带有Helmet的。在头盔组件中，我插入脚本和样式标记，如下所示：
<link href="bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet" />
<script src="bulma-carousel/dist/js/bulma-carousel.min.js"></script>
当运行yarn add bulma-carousel
浏览 1提问于2019-07-13得票数 1
我使用的是带有reactjs的webpack，我确实设置了sass加载程序，但我想知道我导入文件的方式是否正确(它可以工作，但我只是想知道这样做是否是最好的做法)
import hamburger from "../../node_modules/hamburgers/dist/hamburgers.css";
import bulma from "../../node_modules/bulma/bulma";
module: {
rules: [
{
test: /\.js$/,
exclude: /
浏览 1提问于2018-06-08得票数 1
我刚刚开始学习reactjs和bulma.css。我正试图使用bulma的柔性盒制作一个<footer>，以将其固定在页面底部，因为我希望避免编写自己的css规则。
我已经使用npm安装了bulma，并在bulma.css中导入了index.js，如下所示
import "bulma/css/bulma.css";
但是我下面的代码仍然让<footer>卡在标题下面。
<div className='container'>
<header className='has-text-centered'&g
浏览 1提问于2022-03-17得票数 0
回答已采纳
我正在尝试使用bulma css作为我的角度项目。在用npm i --save bulma安装bulma之后，我尝试将bulma包含在我的styles.css文件中
@import "@bulma/css/bulma.css";
我收到一个错误，说明“bulma.css”文件找不到。
我该怎么解决呢？顺便说一下，我检查了"nodex_modules“文件夹，看看是否正确地安装了bulma，并且它就在那里。
浏览 3提问于2020-05-26得票数 0
回答已采纳
1回答
我正在尝试更新Bulma中的主字体系列的变量，但是似乎什么都没有发生。到目前为止，我做的是：
导入初始变量和函数文件。
用谷歌字体导入我想要的字体
设置一个名为$family-serif: "Grandstander", serif;的新变量
更新$family-primary以等于$family-serif的值；
用@import "../assets/bulma/bulma.sass";导入Bulma
源代码可以在：上找到，我在下面包含了代码片段：
@charset "utf-8";
@import url(
浏览 2提问于2020-10-24得票数 6
我对scss规则“扩展”有一个构建问题，使用Vite来构建一个使用bulma-scss包的Vue3组件库。
例如，使用Bluma按钮，我想将bulma-scss button.scss文件导入到我的.vue文件中的标记中(或者导入到button.scss文件中，然后导入到脚本标记中)，如下所示：
<template/>
<script/>
...
<style lang="scss">
@import 'bulma-scss/elements/button';
</style>
在运行$ vite build时，我
浏览 29提问于2022-05-19得票数 0
1回答
我在动态导航按钮上居中对齐文本(水平和垂直)时遇到了问题。按钮设置了和高度，使按钮具有单行或双行文本。如果有单行或双行文本，我希望文本居中对齐。
有什么简单的CSS解决方案来解决这个问题吗？
我知道我已经用"top-margin"手动设置了双行文本的按钮样式(参见下面的css声明)，
#access li#menu-item-21 a {
margin-top:3px; line-height:1.2em; height:27px;
}
但是我不想在有2行文本的按钮上设置特定的css声明。我想为所有可能实现这种外观的buttons..Is设置相同的#access样式？
链
浏览 4提问于2013-10-02得票数 0
3回答
我不想将CSS添加到我的div元素中(例如<div style="text-align: center;">)。
我只想将CSS代码添加到按钮元素中。
<div>
<button>Button</button>
</div>
在这种情况下，如何使按钮水平居中？
浏览 3提问于2013-03-09得票数 53
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
