CSS中居中对齐元素的办法
<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;">text-align属性<span style="color: black;">功效</span>于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">p</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>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">inline-block元素</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">平常</span>的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素<span style="color: black;">同样</span>，是<span style="color: black;">能够</span>在一行中连续<span style="color: black;">摆列</span>的。令inline-block元素居中的<span style="color: black;">第1</span>步是将其转化为block元素，即<span style="color: black;">保准</span>一行<span style="color: black;">仅有</span>这一个元素。</p><span style="color: black;">运用</span>display属性将inline-block转化为block。<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">img</span> <span style="color: black;">{</span>
<span style="color: black;">display</span><span style="color: black;">:</span> <span style="color: black;">block</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;">2. 接下来的<span style="color: black;">过程</span>和block元素<span style="color: black;">同样</span>。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">block元素</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">平常</span>的block对象是<p>, <div>, <section>。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>1：将margin属性设为auto</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面两种写法的效果是<span style="color: black;">同样</span>的。写法1是一次性把margin的四个方向都设置了。<span style="color: black;">倘若</span>用写法2的话，<span style="color: black;">能够</span>把margin-top和margin-bottom设成其他数值。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">div</span> <span style="color: black;">{</span>
<span style="color: black;">/* 写法1 */</span>
<span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
<span style="color: black;">/* 写法2 */</span>
<span style="color: black;">margin-right</span><span style="color: black;">:</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
<span style="color: black;">margin-left</span><span style="color: black;">:</span> <span style="color: black;">auto</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;">margin: auto 只能实现水平居中，<span style="color: black;">不可</span>垂直居中。<span style="color: black;">由于</span>margin-top和margin-bottom的属性为auto时，<span style="color: black;">实质</span>上<span style="color: black;">便是</span>顶端对齐。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>2：用百分数<span style="color: black;">暗示</span>width, margin</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个元素的范围由margin, border, padding, content（中心内容）<span style="color: black;">构成</span>。方便起见，把border和padding都设为0，<span style="color: black;">而后</span>只<span style="color: black;">必须</span><span style="color: black;">调节</span>content的width和margin就<span style="color: black;">能够</span>实现水平居中了。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-aa0a9414851841d2a3cb5b7db39d8dff_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">水平居中原则：margin的百分数 x 2 + width的百分数 = 100%</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-86964252cec349f1fa12d2afcbda67fd_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>水平居中示例代码效果<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;">/* 黑色区域 */</span>
<span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</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;">100</span><span style="color: black;">px</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;">#000</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;">/* 灰色区域 */</span>
<span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">#ddd</span><span style="color: black;">;</span>
<span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">100</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;">20</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">margin-left</span><span style="color: black;">:</span> <span style="color: black;">40</span><span style="color: black;">%</span><span style="color: black;">;</span>
<span style="color: black;">margin-right</span><span style="color: black;">:</span> <span style="color: black;">40</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;"><span style="color: black;">然则</span>，<span style="color: black;">倘若</span>想用类似的垂直居中原则（margin的百分数 x 2 + height的百分数 = 100%）的话，效果就不对了。div#child的高度、上下边距虽然都是<span style="color: black;">咱们</span>想要的数值，<span style="color: black;">然则</span>div#child的上边距超出了div#parent的范围。div#child仍然保持和div#parent的顶端对齐。<span style="color: black;">因此</span>，用百分数<span style="color: black;">暗示</span>width, margin的<span style="color: black;">办法</span>只适用于水平居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-91727f829b5854f717d274148fb279bc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>垂直居中示例代码效果
软文发布平台 http://www.fok120.com/ 外链发布论坛学习网络优化SEO。 软文发布论坛开幕式圆满成功。 http://www.fok120.com 对于这个问题，我有不同的看法...
页:
[1]