【问题标题】:Html center div, but align text left [duplicate]Html中心div,但左对齐文本[重复]
【发布时间】:2021-11-22 17:01:20
【问题描述】:

center div

我想要一个宽度为 50% 的 div。然后 div 应该水平居中。 div 中的 Text 应该左对齐,就像在照片中一样。

我的 HTML 正文代码:

<body>
    <div class="navbar">Navbar</div>
    <div class="content">
        <div class="text1">Some Text</div>
        <div class="text2">More text</div>
    </div>
</body>

【问题讨论】:

  • 到目前为止你尝试了什么?

标签: html css


【解决方案1】:
<body>
<header>
    <nav>
        <h1>Nav</h1>
    </nav>
</header>
<main>
    <div>
        <h1>Hi</h1>
        <p>Hi</p>
    </div>
</main>
      body {
            width: 1024px;
            height:  768px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
       }
       header {
            display: flex;
            align-items: centre;
            padding-top: 20px;
            padding-bottom: 20px;
            justify-content: left;
        }


        nav {
            flex: 2;
            justify-content: left;
            
        }

        div {
            width: 50%;
            min-height: 384px;
            border: 2px solid black;
            text-align: left;
            margin: auto;
            
        }

【讨论】:

  • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
【解决方案2】:

位置:绝对;左:50%;顶部:50%;变换:平移(-50%,-50%); 上面的代码用于使 HTML 元素在其相对父 div 中居中

body {
  background: #333;
  color: #eee;
  position: relative;
  text-align: center;
}

.content {
  width: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: red
}
<body class="body">
  <div class="content">
    <div class="text1">Some Text</div>
    <div class="text2">More text</div>
  </div>
</body>

【讨论】:

  • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
  • 我已经添加了其他评论