文章/答案/技术大牛

发布

文字居中css代码

基础概念

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。CSS中的文字居中是指将文本在水平或垂直方向上居中对齐。

类型

水平居中：将文本在水平方向上居中对齐。
垂直居中：将文本在垂直方向上居中对齐。
水平和垂直居中：同时将文本在水平和垂直方向上居中对齐。

应用场景

网页标题
表单标签
按钮文本
弹窗提示

示例代码

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中示例</title>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center">
        这段文字是水平居中的
    </div>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中示例</title>
    <style>
        .container {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        这段文字是垂直居中的
    </div>
</body>
</html>

水平和垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平和垂直居中示例</title>
    <style>
        .container {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        这段文字是水平和垂直居中的
    </div>
</body>
</html>

参考链接

通过以上示例代码和参考链接，你可以更好地理解和应用CSS中的文字居中技巧。

页面内容是否对你有帮助？

有帮助

没帮助

如何在wp post中将图像垂直居中

css、wordpress

我有一个wordpress网站，我想垂直居中的文字图像。例如，可以看到下面的屏幕截图。我如何调整我的图片和文字，如下图所示的css。图像： ?

浏览 22提问于2021-03-27得票数 0

3回答

css居中在Phonegap中不起作用

android、html、css、cordova

我正在尝试居中的一些文字下面的图像。当我在chrome中显示时工作正常。它在使用Opera Mobile的仿真器上也工作得很好。但是当我用html/css文件创建我的phonegap应用程序时，当在Android中运行时，图像拒绝居中。这是我的css： width: 100%; position: fixed; text-align

浏览 0提问于2013-10-07得票数 1

4回答

在屏幕中间居中放置一个块

html、css、twitter-bootstrap

我想在屏幕中间居中显示一段文字。我想使用bootstrap将文本居中显示在屏幕中间，以节省一些时间。.block { left: 50%; HTML： <div class="col-xs-4">Text</

浏览 5提问于2015-01-23得票数 1

4回答

使用Javascript设置内容样式

javascript、css

在我的网站上有这样的文字，我想要垂直居中。文本长度可以是2行，也可以是3行。使用javascript，我可以很容易地将它垂直居中。CSS垂直居中的方式看起来很复杂，而且还包括IE hack。

浏览 4提问于2010-03-08得票数 0

回答已采纳

4回答

使用图像时，将文本垂直以li和ul标记为中心。

html、css

我试着用图片对文本进行垂直居中，我现在有这个HTML (没有CSS)：

浏览 2提问于2014-01-22得票数 0

回答已采纳

4回答

使段落中的图像居中

css-float、css

我正在寻找一种纯CSS的方式来居中的文字段落内的图像，使文本在图像的两侧包装。

浏览 4提问于2011-08-11得票数 7

回答已采纳

1回答

重心不适用于梵文字体

android、android-layout、fonts、alignment

我被要求使用居中对齐的梵文字体。我可以使用以下代码显示梵文字体，但文本不在屏幕上居中。

浏览 1提问于2012-12-22得票数 1

1回答

如何使用Bootstrap v3居中导航栏上方的品牌，并在移动时隐藏它？

twitter-bootstrap、image、center、stacked

我一直在努力在导航栏上方居中放置两个图像，文本和标志。下面是一些照片和当前代码。**免责声明:图片中的文字不居中。然后我尝试将它们放在中心位置，我尝试了各种不同的方法，但似乎都不起作用，我猜这与Bootstrap的CSS有关。不同的人似乎将他们的品牌居中，但下拉菜单项在品牌的左侧或右侧，而不是下方。我还想在手机上隐藏“文本”，这样徽标就在“汉堡”图标的左侧居中。我熟悉@media，可能会用到这个。

浏览 1提问于2015-06-22得票数 0

3回答

标题两边都有水平线

html、css、pseudo-class

我在一些CSS上工作，其中的设计要求页面标题(标题)与垂直居中的水平线两边居中。此外，页面上有一个背景图像，因此标题的背景需要是透明的。h1 { position: relative; z-index:

浏览 1提问于2013-03-22得票数 57

回答已采纳

1回答

引导垂直对齐列中的一行

css、twitter-bootstrap、vertical-alignment

我有一个代码：我想垂直居中的文字和图标在图片的右边。如何将col-md-10 div的内容垂直居中？

浏览 1提问于2016-11-14得票数 1

回答已采纳

2回答

在另一个Div的中间对齐。

html、css

我试图做一个布局与一个div，其中有一些文字，并列出该文本，4个社交媒体图标。所以我用另一个div做了一个div，但是我不能把最后一个垂直地居中.那么，如何在div "sec10_content“的中间对div "section10”进行居中呢？HTML： <div class="sec10_c

浏览 0提问于2014-11-02得票数 0

回答已采纳

1回答

在<div>中定位图像时

css

使用百分比而不是文字来定位图像是否有优势？例如，在CSS文件中： background: url();} background: url();} 虽然两者都有效地将图像居中。

浏览 3提问于2017-07-15得票数 0

4回答

居中文本div在滑块中

html、css、css-position

我正在尝试在自定义滑块中居中显示文本div。我想要在顶部滑块中居中显示“环境问题”这组文字。当我将它添加到CSS文件中时，它不起作用。有人能告诉我为什么这段代码不能工作吗？

浏览 0提问于2013-04-13得票数 0

回答已采纳

1回答

居中u，但保持左对齐

css

我创建了一个简单的页面与引导，并希望我的ul是中心对齐移动，但与文字左对齐。我尝试在我的CSS文件中将文本对齐设置为左对齐，并将左右边距设置为auto，但它没有居中：ul { text-align

浏览 3提问于2018-04-12得票数 1

回答已采纳

3回答

50%的人什么都不做

css

试着教自己CSS。我试图垂直居中文字，但在网上的例子都使用顶部:50%，这不适用于我。下面是css： display: inline-block; margin-left: 5%;

浏览 0提问于2018-04-08得票数 1

回答已采纳

2回答

如何在容器中垂直对单个unicode字符？

html、css、vertical-alignment、typography

这是很好的工作，通常，除了我总是不得不摆弄偏移，以使它正确地居中。someDiv { height: 10px; text-align: center;但问题是，大多数象形文字本身并不是垂直中心的这意味着，例如，我在一个带有CSS的方形容器中使用垂直偏离中心的●：是否有一种CSS方式来居中字形，而不是字体的中线？(或者技术上是以什么为中心。)

浏览 0提问于2018-04-15得票数 4

回答已采纳

1回答

svg图标与后台重叠。

html、css、svg、markup

我有一个工作倾斜的div块与图标和文字的底部。首先使用jpeg图标。但它们应该与svg交换。此外，图标和文本应该始终居中。这不是通过旧的修订来实现的。我用SVG交换了图标，更改了标记和css，但是图标没有显示出来。似乎，它们是由背景重叠的。此外，还暴露了一些小问题:文本无法格式化和居中。svg不改变hover上的颜色。

浏览 0提问于2019-07-02得票数 1

回答已采纳

2回答

css:文本应该是居中的，但它不是，如果我增加页边距，它就变成居中.不符合逻辑？

css

这是我网站的另一个部分，非常简单：我真的不明白:如果空白处少了，就会有更多的空间，所以文字应该保持居中！下面是div的图片(使用CSS)：下面是p在div中的图片:仔细看:边距为12 is，文本(第一行)没有居中。

浏览 8提问于2011-11-09得票数 0

回答已采纳

3回答

更改大小的项上的水平和垂直对齐css

javascript、css、html

我有一段文字将在长度和宽度上发生变化。我想通过css的方式，如果可能的话，它的水平和垂直，无论文本的长度是什么。如果文本不总是通过css更改，我知道如何对文本进行居中。我可以想象一种通过Javascript来实现它的方法，但是如果有一种方法可以通过css来实现，我想知道它。下面是我的示例代码：<h1 id="description">Play</h1>description{

浏览 4提问于2014-02-22得票数 2

回答已采纳

1回答

Nav之间的空间

html、css、nav

DOCTYPE html> <head> <link href="css/Main.css" type="text/css" rel="stylesheet" />我想把文字放在中间一点。等等！我们换个角度说吧。你看到上面的'StackExchange‘肚脐了吗?嗯，这就是我想要的。我要右边的文字(但居中于中间区域)

浏览 2提问于2017-02-11得票数 2

回答已采纳

点击加载更多