使用CSS使div中的3个按钮居中显示
使用CSS使div中的3个按钮居中显示
提问于 2020-01-03 19:32:17
我有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. 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;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2020-01-03 19:44:48
将类text-center添加到col-lg-4，按钮将居中。
如果bootstrap不可用，请将以下CSS代码添加到文件中。
.text-center{
text-align: center;
}Stack Overflow用户
发布于 2020-01-03 19:44:59
你看起来像这样吗？
.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">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>
Stack Overflow用户
发布于 2020-01-03 19:50:12
从目前给出的信息来看，我只能建议确保将class row mb-3设置为100%宽度。
.row mb-3 {
width: 100%;
}如果这不能解决您的问题，请发布您的CSS代码，以便我们可以看到您应用了哪些样式。这将使故障排除变得更容易。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59577881
复制相关文章
相似问题
腾讯云开发者
