论坛 › 青海 › 【不同样的CSS】实现垂直布局的 8 种方式

wloe2gf 发表于 2024-6-30 06:21:55

【不同样的CSS】实现垂直布局的 8 种方式

    <h2 style="color: black; text-align: left; margin-bottom: 10px;">【不<span style="color: black;">同样</span>的CSS】实现垂直布局的 8 种方式</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若彼岸繁华落尽，谁陪我看落日流年</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">写在前面</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对 CSS 布局<span style="color: black;">把握</span>程度决定你在 Web <span style="color: black;">研发</span>中的<span style="color: black;">研发</span>页面速度。随着 Web 技术的<span style="color: black;">持续</span>革新，实现<span style="color: black;">各样</span>布局的方式<span style="color: black;">已然</span>多得数<span style="color: black;">不堪</span>数了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">近期</span>利用碎片时间，大概用了半个月的时间整理了一个系列，本系列<span style="color: black;">文案</span>总结了 CSS 中的<span style="color: black;">各样</span>布局，以及实现方式及其常用技巧。让你<span style="color: black;">经过</span>该系列<span style="color: black;">文案</span>对 CSS 布局有一个新的认识。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该系列的导航帖</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">彼岸繁華：【不<span style="color: black;">同样</span>的CSS】搞定 CSS 布局-导航帖</span><span style="color: black;">3 赞同 · 0 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span><span style="color: black;"><img src="https://pic1.zhimg.com/v2-f78a6699f98036b3c99429ead6377774_180x120.jpg" style="width: 50%; margin-bottom: 20px;"></span></a></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">里面<span style="color: black;">能够</span>快速<span style="color: black;">转</span>到你想<span style="color: black;">认识</span>的<span style="color: black;">文案</span>(<span style="color: black;">意见</span><span style="color: black;">保藏</span>)</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">实现垂直布局的 8 种方式</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 单行文本垂直居中</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若文本为单行文本的话，直接使用 line-height 等于父元素的高度<span style="color: black;">就可</span>实现。示例代码如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 代码</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"text"</span><span style="color: black;">&gt;</span>这是一个<span style="color: black;">必须</span>居中的测试文本<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS 代码</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">text</span> <span style="color: black;">{</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">3</span><span style="color: black;">rem</span><span style="color: black;">;</span>
      <span style="color: black;">font-weight</span><span style="color: black;">:</span> <span style="color: black;">bold</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">#ff8787</span><span style="color: black;">;</span>
      <span style="color: black;">text-align</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>
      <span style="color: black;">/* <span style="color: black;">经过</span> line-height 等于元素高度<span style="color: black;">就可</span>完成文字垂直居中 */</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">执行结果如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-d39995365dbfd75f3d122a19971526a9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 行内块级元素垂直居中</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若元素是行内块级元素, 基本思想是子元素<span style="color: black;">运用</span> display: inline-block, vertical-align: middle 并让父元素行高等同于高度。示例代码如下所示：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 代码</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"parent"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS 代码</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span> <span style="color: black;">{</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">500</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">300</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">0</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">#ff8787</span><span style="color: black;">;</span>
      <span style="color: black;">/* 为父级容器设置行高 */</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">500</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span> <span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">300</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">300</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">/* 将子级元素设置为 inline-block 元素 */</span>
      <span style="color: black;">display</span><span style="color: black;">:</span> <span style="color: black;">inline</span><span style="color: black;">-</span><span style="color: black;">block</span><span style="color: black;">;</span>
      <span style="color: black;">/* <span style="color: black;">经过</span> vertical-align: middle; 实现居中 */</span>
      <span style="color: black;">vertical-align</span><span style="color: black;">:</span> <span style="color: black;">middle</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">#91a7ff</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">执行结果如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-f7fbac8f05908a123e1a6213d859b2da_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3. <span style="color: black;">运用</span> position + top + height + -margin 实现垂直居中</h3>关于定位的知识，之前有一篇<span style="color: black;">文案</span><span style="color: black;">能够</span>去看一下<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">彼岸繁華：【不<span style="color: black;">同样</span>的CSS】深入理解 position (<span style="color: black;">把握</span>定位<span style="color: black;">便是</span>这么 sa</span><span style="color: black;">4 赞同 · 1 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span><span style="color: black;"><img src="https://pic1.zhimg.com/v2-f78a6699f98036b3c99429ead6377774_180x120.jpg" style="width: 50%; margin-bottom: 20px;"></span></a></div>

7wu1wm0 发表于 2024-10-6 19:49:49

说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。

m5k1umn 发表于 2024-11-9 17:17:11

你的见解独到，让我受益匪浅，非常感谢。

7wu1wm0 发表于 2024-11-12 13:42:39

你的见解独到，让我受益匪浅，期待更多交流。

查看完整版本: 【不同样的CSS】实现垂直布局的 8 种方式