所以我正在使用 Apps 脚本在 Google 表格中制作一个 HTML 侧边栏。我也在使用 Skeleton CSS 框架。
所以我希望这里的提交按钮居中：
我已经尝试过：在 CSS 中创建一个对齐类，然后将其应用于按钮。我忘了提到我所有的其他元素都是对齐的，除了按钮。
<style>
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
</style>
这是我的 HTML 代码：
<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>
谢谢！
uj5u.com热心网友回复：
所有这三个解决方案都应该有效，我会选择第二个或第三个。
如果您使 div全宽并为其添加对齐，它应该可以作业
<div class="u-full-width align">
<button type="submit" class="button-primary">Submit</button>
</div>
您还可以使 div 成为 flex，就像这样（使用类而不是行内样式）
<div class="u-full-width" style="display:flex; justify-content: center">
<button type="submit" class="button-primary">Submit</button>
</div>
您还可以将margin:auto和float:none添加到按钮（使用类而不是行内样式）
<button type="submit" class="button-primary"
style="margin:auto; float:none">Submit</button>
uj5u.com热心网友回复：
代码是：
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}
它在行动中：
body{
background-color: white;
color: black;
}
.align{
text-align: center;
}
.margin{
margin-bottom: 10px;
}
h1{
font-size: 20pt;
}
h2{
font-size: 16pt;
}
/*new code from here*/
button.button-primary.align {
width: 100%;
max-width: 150px;
margin: 0 auto;
display: block;
}<body>
<h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
<h2 class = "align">Here are the custom functions you can use:</h2>
<p class = "align"> See how much you've spent on a brand.</p>
<form onsubmit="runFunc()">
<input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
<p class = "align"> See how much you've spent on a type of clothing.</p>
<form onsubmit="runFuncTwo()">
<input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
<div>
<button type="submit" class="button-primary align">Submit</button>
</div>
</form>
</body>uj5u.com热心网友回复：
CSS：
h1{
font-size: 20pt;
width:100%;
}
h2{
font-size: 16pt;
width:100%;
}
html：在 span 标签中添加所有文本内容：
<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>
0 评论