如何居中对齐固定宽度的 div，即父 div 中的 3 div 中的中间 div？

Question

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

中间 div 和 class domain-input-parent 的宽度应固定为 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>

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

Answer 1

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

.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>

如何居中对齐固定宽度的 div，即父 div 中的 3 div 中的中间 div？

How do I centre align div of fixed width which is middle div among 3 divs within parent div?

html

css

responsive-design

reactjs