[CSS] 图片文字垂直居中问题

david2tdw commented 4 years ago

~~大小不固定的图片和多行文字的垂直水平居中~~ (文章过时) CSS垂直置中技巧，我只會23個，你會幾個

david2tdw commented 4 years ago

实现原理：就是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

<!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>
      .box {
        display: table-cell; /* table-cell  */
        vertical-align: middle; /* 垂直居中  */
        width: 550px;
        height: 800px;
        padding: 0 0.1em;
        border: 4px solid #beceeb;
        color: #069;
        font-size: 20px;

      }

      .box span.word {
        display: inline-block;  /* 内容实际宽度显示  */
        vertical-align: middle; /* 可以省略 */
        font-size: 0.1em;

      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="word">
        这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。
      </span>
    </div>
  </body>
</html>

david2tdw commented 4 years ago

大小不固定，图片的垂直居中:

<!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>
      .box-ul {
        list-style: none;
      }

      .box-ul .show_img {
        vertical-align:middle;
      }

    </style>
  </head>
  <body>
    <ul class="box-ul">
      <li>
        <img class="show_img" src="https://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" alt="213" />
        <img class="show_img" src="https://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" alt="213" />
        <img class="show_img" src="https://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" alt="213" />
      </li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

david2tdw / blog

[CSS] 图片文字垂直居中问题 #104