html居中代码怎么写-前端问答-PHP中文网

html居中代码怎么写

PHPz

发布： 2023-04-27 16:39:16

原创

54036人浏览过

html居中是网页设计中经常使用的一种布局方式，实现方法也比较简单。本文将详细介绍几种实现html居中的方法和对应的代码实现。

一、水平居中

1.用text-align属性实现水平居中

在父元素中设置text-align属性为center，可以实现其内部元素水平居中。例如：

<div style="text-align:center;">
    <p>这里是居中文本</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10335">
                            <img src="https://img.php.cn/upload/webcode/000/000/017/176148720656284.png" alt="斯摩派(smapie)企业建站程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10335">斯摩派(smapie)企业建站程序</a>
                            <p>一个让ASP程序轻松做最少的代码编写量，一般企业所需要的功能都有，参数设置，数据库管理，文件管理，数据初始化，生成HTML页面（这是为了某些客户需要静态页面的需求），页面管理（这里是为了网站中某些单页面需求而开发的，这里你在前台只要用sub_c.article(2) 这个2是这里的id号，也可以是在比如index.asp?id=2 是一样的效果）公告管理，友情链接，信息发布（这里有分类，分类是无限</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="斯摩派(smapie)企业建站程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10335" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="斯摩派(smapie)企业建站程序">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，内部的文本就会在父元素中水平居中显示。

2.用margin属性实现水平居中

在需要居中显示的元素中添加margin属性，设置左右margin值为auto，可以实现该元素水平居中。例如：

<div style="width:300px;margin:auto;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，div元素就会在父元素中水平居中显示。

3.用flexbox实现水平居中

在父元素中设置display属性为flex和justify-content属性为center，可以实现其内部元素水平居中。例如：

<div style="display:flex;justify-content:center;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，内部的文本就会在父元素中水平居中显示。

二、垂直居中

1.用vertical-align属性实现垂直居中

在需要垂直居中的元素中添加display属性为table-cell和vertical-align属性为middle，可以实现该元素垂直居中。例如：

<div style="display:table-cell;vertical-align:middle;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，div元素就会在父元素中垂直居中显示。

2.用flexbox实现垂直居中

在父元素中设置display属性为flex、align-items属性为center和height属性为100%，可以实现其内部元素垂直居中。例如：

<div style="display:flex;align-items:center;height:100%;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，内部的文本就会在父元素中垂直居中显示。

三、水平和垂直居中

1.用text-align和vertical-align属性实现水平和垂直居中

在父元素中设置text-align属性为center和display属性为table-cell，并在需要居中的元素中设置vertical-align属性为middle，可以实现该元素同时水平和垂直居中。例如：

<div style="display:table-cell;text-align:center;vertical-align:middle;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

这样，div元素就会在父元素中水平和垂直居中显示。

2.用flexbox实现水平和垂直居中

在父元素中设置display属性为flex、align-items属性为center、justify-content属性为center和height属性为100%，可以实现内部元素同时水平和垂直居中。例如：

<div style="display:flex;align-items:center;justify-content:center;height:100%;">
    <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>

登录后复制

以上就是实现HTML水平和垂直居中的几种具体方法和对应的代码实现。实际应用中，应根据需要选择合适的方法，使网页布局更加美观和实用。同时，应避免滥用内联样式，将样式表统一管理，提高代码可读性和维护性。

以上就是html居中代码怎么写的详细内容，更多请关注php中文网其它相关文章！