如何将固定宽度的 div 居中对齐，它是父 div 内 3 个 div 中的中间 div？答案

【问题标题】：How do I centre align div of fixed width which is middle div among 3 divs within parent div?如何将固定宽度的 div 居中对齐，它是父 div 内 3 个 div 中的中间 div？
【发布时间】：2021-11-04 11:25:37
【问题描述】：

这是我的 HTML（实际上是 JSX）：

domain-input-parent 类的中间 div 应具有固定宽度 400px 并应保持在屏幕中心，水平

这样domain-label 和icon-container 的宽度将相等。

而且这种定位应该适用于any 屏幕宽度（>400px）

如何做到这一点？

以下是完整的 HTML：

  <div className="domain-container">
    <div className="domain-label">
      <p>Domain</p>
    </div>
    <div className="domain-input-parent">
      <input className="domain-input" id="website-url" placeholder="    https://www.yourwebsite.com" onInput={validateDomain} onClick={validateDomain}></input>
      <p id="error-text" className={ (hideErrorText == true) ? "hidden invalid-input" : "invalid-input"}>Please enter a valid domain ex. www.example.com</p>
    </div>
    <div className="icon-container">
      <img className="info-icon" src="images/info_icon.png"></img>
      <span className="tooltip-text">This is the top level website for seo radar to monitor.  We will validate the domain and will fetch the robots.txt file associated with it.  Examples: www.example.com or example.com.</span>
    </div>
  </div>

如果需要任何其他信息，请告诉我。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
您的问题应该包括您现有的 CSS。
@BSMP 是的，对。主要部分丢失了

标签： html css reactjs responsive-design

【解决方案1】：

input 和 img 没有结束标签。 className 是一个 JS 构造。使用弹性

.domain-container{
display:flex;

}

.y {width:400px}

.x {
width: calc((100% - 400px) / 2);
}

div{border:solid 1px black;}

<div class="domain-container">
  <div class="domain-label x">
    <p>Domaina</p>
  </div>
  <div class="domain-input-parent y">
    <input className="domain-input" id="website-url" placeholder="    https://www.yourwebsite.com" onInput={validateDomain} onClick={validateDomain}>
    <p id="error-text" className={ (hideErrorText==t rue) ? "hidden invalid-input" : "invalid-input"}>Please enter a valid domain ex. www.example.com</p>
  </div>
  <div class="icon-container x">
    <img class="info-icon" src="images/info_icon.png">
    <span class="tooltip-text">This is the top level website for seo radar to monitor.  We will validate the domain and will fetch the robots.txt file associated with it.  Examples: www.example.com or example.com.</span>
  </div>
</div>

【讨论】：