Question

以下是我尝试的蓝图：

blueprint

如您所见，我想将两个文本移动到输入框的中心。

HTML：

<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

我试着这样做没有运气：

<p style="text-align: center;" id="win">On win:</p>
<p style="text-align: center;float: left;" id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

result

输入的CSS：

input[class="default"] {
    width: 30%;
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

我该如何正确地做到这一点？

Answer 1

为p个float: left;元素提供obj.id = "33"个元素。

Answer 2

使用text-align和body {text-align: center;} #win, #lose {width: 50%; float: left; text-align: center;} #lose {float: right;} .default {display: inline-block; width: 45%; padding: 3px;}即可实现目标：

＆＃13;

<p id="win">On win:</p>
<p id="lose">On lose:</p>
<input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
<input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>

＆＃13;

{{1}}

＆＃13;

预览

Answer 3

您必须使用输入和标题设置一个块。

body
{
  text-align:center;
}

input[class="default"] {
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

#lose,#win
{
  display:inline-block;
  text-align:center;
  width: 30%;
}

<body>
<div  id="win">
  <p>On win:</p>
  <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
</div>

<div id="lose">
  <p>On lose:</p>
  <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
</div>
</body>

Answer 4

我会在段落和输入周围使用flexbox作为div。

.row {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

input[class="default"] {
  width: 30%;
  padding: 12px 20px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #555;
  text-align: center;
  background-color: white;
  display: inline-block;
}

<div class="row">
  <p id="win">On win:</p>
  <p id="lose">On lose:</p>
</div>
<div class="row">
  <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off" />
  <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off" />
</div>

Answer 5

对我来说最好的方法是使用flex和容器：它不会弄乱你的DOM（就像float那样。例如，子元素可能比它们的父元素大。）所以我会选择：

  #flexbox {
    display: flex;
    flex-direction: row;
  }
  .container {
    text-align: center;
  }
  input[class="default"] {
    width: 30%;
    padding: 12px 20px;
    margin : 0 auto;
    box-sizing: border-box;
    border: 1px solid #555;
    text-align: center;
    background-color: white;
    display: inline-block;
}

<div id="flexbox">

  <div class="container">
      <p id="win">On win:</p>
      <input class="default" id="onwin" placeholder="%" value="0" autocomplete="off"/>
  </div>
  <div class="container">
    <p id="lose">On lose:</p>
    <input class="default" id="onlose" placeholder="%" value="0" autocomplete="off"/>
  </div>

</div>

为什么我不能让两个<p>元素并排并按中心对齐？

5 个答案: