7wu1wm0 发表于 2024-6-30 09:50:23

CSS实现居中对齐


    <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>用好CSS这门利器，<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>聊一聊居中的几种实现方式。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>水平居中</h2>文字和<span style="color: black;">照片</span>等行内元素想实现水平居中，<span style="color: black;">能够</span>在父容器上添加text-align属性，<span style="color: black;">就可</span>实现容器内部的文字和<span style="color: black;">照片</span>居中水平对齐<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">#parent</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>
    </div>固定<span style="color: black;">体积</span>的块级容器想实现水平居中对齐，可采用如下<span style="color: black;">方法</span>
    <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;">1、</span><span style="color: black;">运用</span>margin: auto;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">#parent</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;">lightgrey</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">300px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">300px</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;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">160px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">160px</span><span style="color: black;">;</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">0px</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;"></div>margin: auto属性<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;">2、</span><span style="color: black;">运用</span>css3的calc属性</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">#parent</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;">lightgrey</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">300px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">300px</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;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">160px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">160px</span><span style="color: black;">;</span>
      <span style="color: black;">/* 下面的160px是当前容器宽度 */</span>
      <span style="color: black;">margin-left</span><span style="color: black;">:</span> <span style="color: black;">calc</span><span style="color: black;">(</span><span style="color: black;">50</span><span style="color: black;">%</span> <span style="color: black;">-</span> <span style="color: black;">160px</span> <span style="color: black;">/</span> <span style="color: black;">2</span><span style="color: black;">)</span>
      <span style="color: black;">}</span>
    </div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-c9fb9c0b74e32c587157a66acc09fe06_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>css3的calc属性自适应宽度的容器想实现水平居中<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;">1、</span><span style="color: black;">运用</span>css3的transform向左偏移<span style="color: black;">就可</span>实现，代码中的margin-left<span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">运用</span>相对定位实现距离左边50%的距离</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">#parent</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;">lightgrey</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">300px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">300px</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;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">black</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">160px</span><span style="color: black;">;</span>
      <span style="color: black;">margin-left</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">transform</span><span style="color: black;">:</span> <span style="color: black;">translateX</span><span style="color: black;">(</span><span style="color: black;">-50</span><span style="color: black;">%</span><span style="color: black;">)</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;">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;">id</span><span style="color: black;">=</span><span style="color: black;">"parent"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!-- 此处<span style="color: black;">运用</span>行内样式，仅仅用于举例div不定宽 --&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"child"</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"width: 160px;"</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>




nykek5i 发表于 2024-11-10 04:42:39

seo常来的论坛，希望我的网站快点收录。
页: [1]
查看完整版本: CSS实现居中对齐