所以我正在使用 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/412579.html
標籤：