时间戳

首页 > 解决方案 > 居中对齐 100% 宽度的元素

html - 居中对齐 100% 宽度的元素

问题描述

我需要一些帮助来对齐元素。

这是我正在使用的布局：

.container {
  display: block;
  box-sizing: border-box;
}

.heading {
  margin-bottom: 10px;
}

.file-input {
  display: block;
  border: 2px dashed #ddd;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}
<div class="container">
    <h4 class="heading">7. Attachments</h4>
    <input type="file" class="file-input">
</div>

是否有可能在不更改 HTML 代码的情况下以某种方式将“选择文件”按钮与边框内的文本居中对齐？

我无法更改 HTML 代码。我只能用我所拥有的..

编辑：我只是想补充一点，我想将边界保持在width: 100%.

标签： htmlcss

解决方案

这是我能得到的最接近的。你也许可以用网格做到这一点

.container {
  display: flex;
  justify-content:center;
  box-sizing: border-box;
  flex-wrap:wrap;
}

.heading {
  margin-bottom: 10px;
  width:100%;
}

.file-input {
 
  border: 2px dashed #ddd;
  padding: 10px;
  padding-left:35%;
  padding-right:35%;
  width: 30%;
  cursor: pointer;
}
<div class="container">
    <h4 class="heading">7. Attachments</h4>
    <input type="file" class="file-input">
</div>

推荐阅读