问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这种情况下，子元素多行文字如何垂直居中？

头像
明未为洺
    65321

    这种情况下，子元素多行文字如何垂直居中？

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 300px;
      border: 1px solid red;
      word-wrap: break-word;
    }
    .box {
      display: flex;
      align-items: center;
      height: 500px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">1234aaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</body>
</html>

    flexboxcss垂直居中html
    阅读 1.1k
    3 个回答
    得票最新
    头像头饰
    fff
      595
      ✓ 已被采纳

      align-items: center;垂直居中，word-break:break-all;字母数字换行

      .box1{
            width: 100px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            word-break:break-all;
      }
      头像
      Meet
        513
        新手上路，请多包涵

        可以使用.box1 上应用 Flexbox 并设置适当的对齐方式，可以实现多行文字的垂直居中

        .box1 {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  word-wrap: break-word;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* 使文字水平居中，可选 */
}
        头像
        周周架构师
          29223

          在这种情况下，要让子元素多行文字垂直居中，可以结合使用 flex 布局和一些辅助的 CSS 属性。以下是修改后的代码示例，使 box1 中的多行文字在 box 中垂直居中显示：

          <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: auto; /* 让高度根据内容自适应 */
      border: 1px solid red;
      word-wrap: break-word;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1">1234aaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</body>
</html>

          box 类:

          display: flex; 和 align-items: center; 使其子元素在垂直方向居中。
          justify-content: center; 使其子元素在水平方向居中（可选，根据需要）。

          box1 类:

          display: flex; 使 box1 内部的内容也使用弹性布局。
          align-items: center; 使内部内容在垂直方向居中。
          justify-content: center; 使内部内容在水平方向居中。
          text-align: center; 使文本在多行时居中对齐（可选，根据需要）。
          通过上述设置，box1 内的多行文字将会在父容器 box 中垂直居中，并且在 box1 内部也会居中对齐。这样可以确保多行文本在视觉上居中显示。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏