英文:
Centering 3 buttons within div on the page using CSS
问题
我有3个按钮，我想让它们始终位于页面中央，但随着窗口变宽，按钮会偏离中央（如图所示）。
如何编写HTML/CSS以解决此问题，使它们始终保持完全居中？
似乎它偏向左边，留下了右边的多余空间。
<body>
<h1 class="title">Creative Checker</h1>
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="alert alert-success" style="display: none">
</div>
<div class="alert alert-danger" style="display: none">
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">
1. 选择产品类型：
</p>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="text-center">
2. 上传文件夹/图片：
</p>
<form action="server.php"
class="dropzone"
id="my-awesome-dropzone"
onsubmit="onSubmit()">
</form>
</div>
</div>
</div>
</div>
#btn-snapshot {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-tmd {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-bpush {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
英文:
I have 3 buttons that I'm looking to keep central on the page, however as the window gets wider the buttons skew off from central (shown in image).
What would be the HTML/CSS to fix this so that they are always perfectly central?
It seems as if it is skewing more to the left, leaving extra space on the right.
<body>
<h1 class="title">Creative Checker</h1>
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="alert alert-success" style="display: none">
</div>
<div class="alert alert-danger" style="display: none">
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">
1. Select product type:
</p>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="text-center">
2. Upload folder/images:
</p>
<form action="server.php"
class="dropzone"
id="my-awesome-dropzone"
onsubmit="onSubmit()">
<!-- <select name="product-type" id="product_type">
<option value="snapshot">
Snapshot
</option>
<option value="TMD">
TMD
</option>
<option value="b-push">
Behavioural Push
</option>
</select> -->
</form>
</div>
</div>
</div>
</div>
#btn-snapshot {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-tmd {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
#btn-bpush {
z-index: 39;
width: 250px;
min-height: 15px;
background-color: #75ACE0;
border-radius: 20px;
position: relative;
}
答案1
得分: 2
将类名text-center添加到col-lg-4，按钮将居中显示。
如果没有使用Bootstrap，请将以下CSS代码添加到您的文件中。
.text-center {
text-align: center;
}
英文:
Add the class text-center to col-lg-4 and the button will be centered.
If bootstrap is not available, add the following CSS code to your file.
.text-center{
text-align: center;
}
答案2
得分: 0
你是否看起来像这样？
.row {
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: center;
}
.btn {
color: white;
background: #45C9F8;
border: none;
padding: 8px 40px;
border-radius: 50px;
}
<div class="row mb-3">
<div class="col-lg-4">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">快照</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">行为推送</button>
</div>
</div>
英文:
Are you looking like this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.row {
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: center;
}
.btn {
color: white;
background: #45C9F8;
border: none;
padding: 8px 40px;
border-radius: 50px;
}
<!-- language: lang-html -->
<div class="row mb-3">
<div class="col-lg-4">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col-lg-4">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
</div>
</div>
<!-- end snippet -->
答案3
得分: 0
单从目前提供的信息来看，我只能建议确保 class row mb-3 设置为 100% 的宽度。
.row mb-3 {
width: 100%;
}
如果这不能解决您的问题，请发布您的 CSS 代码，以便我们查看您已应用的样式。这将有助于更容易地进行故障排除。
英文:
Purely from the information given at the moment I can only suggest ensuring that the class row mb-3 is set at 100% width.
.row mb-3 {
width: 100%;
}
If this doesn't fix your issue, post your CSS code so we can see what styles you have applied. It'll make troubleshooting easier.
答案4
得分: 0
HTML代码：
<div class="container">
<div class="row">
<div class="col">
<button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
</div>
<div class="col">
<button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
</div>
<div class="col">
<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
</div>
</div>
</div>
CSS：
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 0px #6c757d;
padding: 10px;
}
这是相同内容的工作Bootstrap示例链接：链接。
英文:
HTML code:
<div class="container">
<div class="row">
<div class="col">
` <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>`
</div>
<div class="col">
` <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>`
</div>
`<div class="col">`
`<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>`
</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 0px #6c757d;
padding: 10px;
}
Here is a working bootstrap fiddle a link for the same.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论