Question

我试图将两个文本框居中对齐。但是，正如您在此图中看到的那样，它们没有对齐中心。 https://gyazo.com/c47f4037ba1ab3abef5833358d94172e 是什么引起了问题？解决办法是什么？

这是我的代码：

<div style="text-align:center;">
  <input type="text">
  <br>
  <input type="text">
</div>

Answer 1

我建议使用flexbox。

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div>
  <input type="text">
  <input type="text">
</div>

Answer 2

input {
  display: block;
  width: 300px;
  margin: auto;
}

<div>
  <input type="text">
  <input type="text">
</div>

Answer 3

未对齐的主要原因是两个输入之间的空白，更确切地说是第一个输入与br之间的空白。如果将其删除，将可以：

<div style="text-align:center;">
  <input type="text"><br>
  <input type="text">
</div>

这是另一个清楚显示空白问题的示例：

<div style="text-align:center;">
  <input type="text">
  <br>
  <input type="text">
  <br>
</div>

我们在末尾添加了另一个br，这使我们在第一个输入和第二个输入之后都有空白，而显然空白仅在第一个之后。

添加边框将向我们显示这些空白：

<div style="text-align:center;display:inline-block;border:1px solid;">
  <input type="text">
  <br>
  <input type="text">
  <br>
</div>
<div style="text-align:center;display:inline-block;border:1px solid;">
  <input type="text">
  <br>
  <input type="text">
</div>

Answer 4

您可以使用以下命令使div中的元素居中：

if ([[questionaireDic objectForKey:@"Answer6Option"] boolValue]) {
    NSArray *ans6Arr = [subQuestionaireArr filteredArrayUsingPredicate:[NSPredicate predicateWithFormat:@"QuestionNo = 6 AND SortOrder = 1"]];
    int rowCount = 1;
    for (int i =0;i<ans6Arr.count ; i++) {
        NSDictionary *ans6Dic = ans6Arr[ i];
        NSDictionary *answer6Row1Cell1TextDic = [NSDictionary dictionaryWithObjectsAndKeys:@"810-L50-%d",rowCount,@"DataId",[ans6Dic objectForKey:@"Cell1Text"],@"Value", nil];
        [questionaireArr addObject:answer6Row1Cell1TextDic];

        NSDictionary *answer6Row1Cell2DateDic = [NSDictionary dictionaryWithObjectsAndKeys:@"820-L50-%d",rowCount,@"DataId",[ans6Dic objectForKey:@"Cell2Date"],@"Value", nil];
        [questionaireArr addObject:answer6Row1Cell2DateDic];

        NSDictionary *answer6Row1Cell3NumberDic = [NSDictionary dictionaryWithObjectsAndKeys:@"830-L50-%d",rowCount,@"DataId",[ans6Dic objectForKey:@"Cell3Number"],@"Value", nil];
        [questionaireArr addObject:answer6Row1Cell3NumberDic];

        if (![[ans6Dic objectForKey:@"Cell4Number"] isKindOfClass:[NSNull class]]) {
            NSDictionary *answer6Row1Cell4NumberDic = [NSDictionary dictionaryWithObjectsAndKeys:@"840-L50-%d",rowCount,@"DataId",[ans6Dic objectForKey:@"Cell4Number"],@"Value", nil];
            [questionaireArr addObject:answer6Row1Cell4NumberDic];
        }
        rowCount++;
    }

这是修改后的代码的代码段：

#yourDiv {
    display: block;
    margin: 2px auto;
    height: 20px;
    width: 200px;
}

Answer 5

您需要做的就是为父级设置一个宽度，这里是div，然后将width的{{1}}设置为input，如下所示解。使用100%代替margin: 0 auto;，您将实现想要的目标。

text-align: center;

.parent-div {
  margin: 0 auto;
  width: 30%;
}

.parent-div input{
  width: 100%;
}

谢谢。

尝试将两个文本框居中对齐

5 个答案: