html中代码文字居中怎么写？

小灰灰 2020-04-23 08:15 929阅读 0赞

# html中代码文字居中怎么写？

**文字水平居中**

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水平居中</title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: palegoldenrod;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="box">水平居中了--文本文字</div>
    </body>
</html>
```

效果图：

![](/images/1587631730882.png)

说明：text-align

text-align是一个基本的属性，它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中，想要使文本居中，直接使用center即可。

该属性设置文本和img标签等一些内联对象（或与之类似的元素）的居中。

**文字垂直居中**

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>垂直居中</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                background: paleturquoise;
                line-height:300px;
            }
        </style>
    </head>
    <body>
        <div class="box">垂直居中了--文本文字</div>
    </body>
</html>
```

效果图：

![](/images/1587631745484.png)

line-height 属性设置行间的距离（行高）。不允许使用负值。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

发表评论取消回复

表情：

评论列表（有 0 条评论，929人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 页面整体居中,html5标题居中 DIV布局怎么在页面水平居中

在html5表格中标题caption如何居中用CSS控制就可以了。不过，它默认居中的，一般配合标签使用。写在标签内部。 html5中怎么设置fieldset居中？就是让

ゞ浴缸里的玫瑰/ 2022年10月05日 11:56/ 0 赞/ 110 阅读

相关 html文字自动轮播代码怎么写,图片轮播HTML代码

![428c09165da34559d48c211c0d0c1a7f.png][]代码运行效果图要实现类似幻灯片效果的图片自动切换，怎样通过Html代码实现，对于很多新手来

逃离我推掉我的手/ 2022年10月05日 10:51/ 0 赞/ 168 阅读

相关 html简单实现自动轮播代码怎么写,HTML图片轮播代码怎么写？

贴一个超级简单的JS代码，不需要插件图片轮播代码 body\{max-width: 640px;margin: 0 auto;\} \lunbo ul li\{widt

客官°小女子只卖身不卖艺/ 2022年10月05日 10:46/ 0 赞/ 184 阅读

相关 css中让文字水平居中和竖直居中

要让文字在一个标签中水平居中只需要一行代码即可： text-align:center; 要让文字竖直居中的话，需要设置该行字的行高（line-height）：

- 日理万妓/ 2022年08月13日 18:39/ 0 赞/ 194 阅读

相关 html,div中多行文字垂直居中

css代码 .name { height: 150px; width: 150px; vertical-align:middle; display:table-cel

以你之姓@/ 2022年06月15日 03:54/ 0 赞/ 159 阅读

相关【html5】纯css实现圆圈中显示居中文字效果

为了实现qq邮箱app的邮件显示效果，就是哪个邮件左边的图案，当没有找到对应logo时，以主题头一个字作为logo 代码如下： <html> <head>

ゝ一纸荒年。/ 2021年11月06日 00:02/ 0 赞/ 324 阅读

相关 div中文字居中加粗

<div class="font\_div"> DIV文字 </div> .font_div{ font-weight:bold;/加粗/

女爷i/ 2021年09月27日 19:24/ 0 赞/ 338 阅读

相关 css文字居中怎么打

CSS text-align 我们设置3个盒子，分别都设置盒子CSS高度、CSS宽度相同，再分别设置三个盒子里内容靠左对齐、居中对齐、靠右对齐。我们都设置3个盒子高度...

你的名字/ 2021年02月01日 16:06/ 0 赞/ 637 阅读

相关 html里图片怎么居中对齐？

图片的居中方式有很多种吧，算是html基础，下面给大家介绍几种方法。

小灰灰/ 2020年04月23日 08:46/ 0 赞/ 992 阅读

相关 html中代码文字居中怎么写？

text-align是一个基本的属性，它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中，想要使文...

小灰灰/ 2020年04月23日 08:15/ 0 赞/ 930 阅读