如何定位 input 和 p 元素，使其中心相互匹配答案

【问题标题】：How to position input and p element such that their centers match each other如何定位 input 和 p 元素，使其中心相互匹配
【发布时间】：2020-03-29 13:29:59
【问题描述】：

我希望元素 #1 和 #2 彼此中心匹配。我希望元素 1 和 2 中心（中点）匹配。如何使用 css 实现这一点？

 <input id="inputCustomer" tyep="text">
 <p id="spandiv">{{customerName}}</p>

第一个元素是输入框，第二个元素是 p 元素，当我将鼠标悬停在输入元素上时会出现。

【问题讨论】：

你试过margin: 0 auto;吗？

标签： javascript html css angular typescript

【解决方案1】：

使用text-align:center

<div style="text-align:center">
  <input id="inputCustomer" type="text">
</div>
<p id="spandiv" style="text-align:center">Customer name</p>

【讨论】：

【解决方案2】：

你可以：

将<input> 显示为block，并提供auto 的左右margin
让<p> 与center 中的文本对齐，因为宽度（默认）为100%。

.wrapper > input {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wrapper > p {
  text-align: center;
}

<div class="wrapper">
  <input id="inputCustomer" tyep="text">
  <p id="spandiv">{{customerName}}</p>
</div>

【讨论】：

【解决方案3】：

请在下面找到代码 sn-p，这可能有用：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
}

li p {
  display: none;
  position: absolute;
  top: 0;
  left: 50px
  background-color: #FFF;
}

li:hover p {
  display: block;
}

<ul>
  <li>
    <input type="text" />
    <p>Text to show</p>
  </li>
</ul>

【讨论】：