Question

我正在尝试将引导谷歌样式输入字段居中。但是，我不确定如何在没有黑客或打破风格的情况下正确地做到这一点。

我尝试在输入周围添加一个#center div，左右添加自动边距，没有运气。

我可以使用保证金权利，但它们会破坏风格并且不是一个合适的解决方案。

HTML：

<body>
<dic id="center">
<div class="styled-input">
  <input type="text" required />
  <label>Email</label>
  <span></span>
</div>
</div>
</body>

CSS：

#center{
  margin-left: auto;
  margin-right: auto;
}

* {
    box-sizing: border-box;
}

.page-wrap {
    max-width: 75rem;
    margin: 0 auto;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    font-size: 0.75em;
    color: #8e44ad;
    top: -0.9rem;
    transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}

.styled-input {
    float: left;
    width: 33.3333%;
    margin: 2rem 0 1rem;
    position: relative;
}
.styled-input label {
    color: #999;
    padding: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
    pointer-events: none;
}
.styled-input.wide {
    width: 100%;
}

input, textarea {
    padding: 1rem 1rem;
    border: 0;
    width: 100%;
    font-size: 1rem;
}
input ~ span, textarea ~ span {
    display: block;
    width: 0;
    height: 3px;
    background: #8e44ad;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}
input:focus, textarea:focus {
    outline: 0;
}
input:focus ~ span, textarea:focus ~ span {
    width: 100%;
    transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}

textarea {
    width: 100%;
    min-height: 15em;
}

body{
  background-color: gainsboro;
  }

现场演示：https://jsfiddle.net/ce39fp2h/

如您所见，输入卡在左侧。我怎样才能正确居中？

Answer 1

您可以使用以下规则，而不是当前规则：

.styled-input {
    width: 33.3333%;
    margin: 2rem auto;
    position: relative;
}

演示： https://jsfiddle.net/ce39fp2h/4/

Answer 2

不确定这是否是你需要的，但我这样做了，

<body>
<div id="row">
<div class="col-md-12 styled-input">
  <input type="text" required />
  <label>Email</label>
  <span></span>
</div>
</div>
</body>

并删除：

float: left;
width: 33.3333%;

Answer 3

看看这个演示。 https://jsfiddle.net/ce39fp2h/3/

我只在你的代码中使用它：

删除并将该ID放在下一个：

<body><div id="center" class="styled-input"><input type="text" required /><label>Email</label><span></span></div></body>

在css中我改变了：

#center {
margin: auto;
width: 50%;
padding: 10px;}

并在样式输入类中删除float：left。

如何正确引导自举输入字段？

3 个答案: