如何以响应式方式(不断地)居中显示文本？
以响应式方式居中显示文本可以通过CSS来实现。以下是一种常用的方法：
- 使用flexbox布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}这将使容器内的文本水平和垂直居中。您可以将文本放置在一个具有.container类的父元素中。
- 使用绝对定位和transform属性：
.container {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}这将使文本相对于其父元素居中。您可以将文本放置在一个具有.container类的父元素中，并将文本放置在一个具有.text类的子元素中。
- 使用表格布局：
.container {
display: table;
width: 100%;
height: 100%;
}
.text {
display: table-cell;
text-align: center;
vertical-align: middle;
}这将使文本在容器中水平和垂直居中。您可以将文本放置在一个具有.container类的父元素中，并将文本放置在一个具有.text类的子元素中。
以上是三种常用的方法，可以根据具体情况选择适合的方法来实现响应式居中显示文本。
相关·内容
1回答
我有一个滑块(使用bxslider)，我想在滑块的顶部水平和垂直居中放置一个固定的图像，这样文本就会停留，幻灯片就会移动，每个幻灯片下面都有不同的背景图像。我已经尝试了以下方法，将我想要的横幅放置在适当的位置，绝对位于父节容器中，但这没有响应。有没有一种更好的、响应式的方法来保持文本垂直居中？首先，谢谢你：
$('#productslider').bxSlider({
minSlides: 1,
maxSlides: 1,
pager: true,
controls: false,
auto: true,
speed: 1000,
浏览 3提问于2016-06-30得票数 0
2回答
在我的SSRS报告中，我正在从数据集(SQL查询)中获取文本来填充表。
查询中有一行特定的文本我希望显示为居中(即居中对齐)。
这个是可能的吗？
浏览 0提问于2013-05-07得票数 0
2回答
如何以像素为单位获取字符串的长度(给定字体、大小、粗细等)？我已经看到了尝试System.Drawing.Graphics的推荐。*但在silverlight中我似乎不能使用该程序集/命名空间。
我希望在图像下居中显示文本框，但文本是动态提供的。
浏览 1提问于2010-05-25得票数 0
回答已采纳
1回答
我尝试在响应式div中垂直居中一些文本。我没能弄明白。如果我能得到一些帮助，我将不胜感激。
谢谢。
<style>
.thumb {
float: left;
margin: 0px;
padding: 0px;
position:absolute;
height:100%;
width:100%;
}
.thumb img {
width: 100%;
padding: 0;
}
.thumb > div {
background-color: rgba(0,0,0,0.1);
浏览 0提问于2014-03-07得票数 0
我目前正在使用一个显示应用程序的内容，我有很多数据，我必须安排它们并在我的应用程序中显示，这样的内容就像是移动友好的(实际上，我试图用github库直接显示pdf文档，但这导致了像移动桌面站点这样的没有响应性的节目。)我能做什么或者用什么方法来解决我的问题？
例如，我有一个类似.的文档。
现在，如果我想直接在我的应用程序中显示那个文档，它根本不是移动friendly..But，没有人想要一个应用程序来显示没有响应性的文本。那么，应该做些什么才能对我的内容有一个响应性的视图..
，所以我想问如何以移动友好的方式显示这个没有响应性的文档内容，。
浏览 0提问于2018-08-20得票数 1
回答已采纳
我试图简单地设置我的选择框的样式，使文本居中对齐。它可以在Firefox中运行，但不能在Safari或Chrome中运行。当检查Chrome中的元素时，它显示文本居中，但事实并非如此。有没有人知道为什么它不以Chrome和Safari为中心？
浏览 5提问于2013-05-11得票数 0
2回答
默认情况下，在将文本对象添加到纸张时，拉斐尔javascript库会将文本围绕y点居中。它基本上是将高度除以2，并将文本附加到新的y坐标。我正在寻找一种不同的行为，即使当你添加多行时，文本也会保持相同的坐标。
我想知道是否有人有一个干净利落的方法来改变这种行为。我可以在源代码中修改它，但我不喜欢在新版本出来时不断地维护它。
谢谢!
浏览 0提问于2010-02-28得票数 0
我正在尝试编写一页响应式Bootstrap设计的一部分，其中包含两列并排的文本。设计者希望这两列有一个最大宽度，但一旦达到最大宽度，它就不再居中(因为其余内容继续响应)。
有没有办法让这两列文本居中显示？
编辑:以下是代码外观的链接：
浏览 0提问于2014-03-07得票数 6
回答已采纳
我使用WebView来显示带有颜色和字体大小的格式化HTML文本文件。
我的问题是它不断地从文本中删除空格，就像它将两个单词组合在一起一样。我认为这是因为它试图将文本与屏幕宽度相匹配。我该怎么解决这个问题？或者有更好的方法来显示像这样的格式化文本？(我需要尺寸、颜色、链接和一些居中的文本。
这个问题已经提出，但没有得到答复。
浏览 0提问于2014-01-29得票数 1
回答已采纳
10回答
我有一个类名为"headertekst“的h2头文本。我想把它放在中心。我尝试使用margin-left: auto、margin-right: auto和width: 100%，但是什么都没有发生。
我可以给它一个margin-left: 20%，它会将它居中，但那只在我的笔记本电脑上。它不会在其他屏幕尺寸和移动设备上居中。
如何以正确的方式居中？
浏览 0提问于2017-01-03得票数 13
2回答
希望在div的左侧有一个图像(徽标)，文本(标题)以div为中心。一个基本的问题，但也有一些注意事项。
如果我在图像上使用position: absolute，文本是居中的，但是当我调整窗口的大小时，图像就覆盖了文本。希望这是一个响应页面，其中的文本是居中的，直到它击中图像和不会重叠。
如果我在图像上使用float: left，那么文本实际上不是完全居中的。
我可以在文本的另一边创建一个同样大小的margin-right，但是我把这些像素浪费在更小的显示器上，我不想这样做。最终，这将不仅仅是我所关注的那条线。
基本上，我想：
只要屏幕足够宽，文本就以中心为中心。
当屏幕不够宽时，要环绕
浏览 4提问于2015-08-18得票数 0
我有一个包含一个单元格的分组表视图。在这个单元格中，我在cellForRowAtIndexPath:中放入一个UITextView，然后立即生成第一个响应器。
我的问题是:当我开始输入时，文本是左对齐的，而不是我想要的水平和垂直居中。这是在iOS 7上。
如何使文本居中？
浏览 2提问于2014-02-25得票数 17
回答已采纳
6回答
居中响应文本
、、、
我这里有个小玩意-
这只是一段文字，我需要在窗口中居中。
文本需要一个设置的宽度，因为我不希望它是容器的全部宽度。
当窗口变小时，文本需要保持在中间，但变得更窄。
在这里的示例中，它保持居中并响应，直到达到600 to，然后保持该宽度。
我知道我设置了那个宽度，但我这样做是为了使它中心。
<div class="container-fluid ">
<div class="hero">
<div class="hero_heading text-center">
浏览 7提问于2014-08-22得票数 2
回答已采纳
在下面的QML中，我在行布局中有三个项目，每个项目都需要在该布局中垂直居中。
中间的项目是一个PlayerSelector，它创建不同数量的文本编辑框来更改每个球员的名称。我尝试了两种不同的方法来保持PlayerSelector垂直居中。对我有效的方法会导致运行时警告，建议的方法不会保持该项垂直居中。请参阅这些屏幕标题和以下代码：
方法1和方法2最初都以中心为中心
方法1正确地保持垂直居中(anchors.verticalCenter)
方法2不保持垂直居中(Layout.alignment)
import QtQuick 2.12
import QtQuick.Contro
浏览 210提问于2021-06-06得票数 0
回答已采纳
我有一个没有响应的网页，有居中的内容700 non宽度700 non高度。我很难让移动设备显示内容(我正在Android上用Chrome进行测试，但我猜其他设备也会出现同样的问题)。我尝试过用viewport和css媒体屏幕做各种事情，但是Chrome不断地放大页面的某些部分，而不是显示所有的内容。这让我感到惊讶，因为当我访问那些显然没有为移动设备进行优化的网站时，我通常的经验是看到整个页面“放大”，然后我就可以放大。我希望我的页面也能像这样工作，不管我做什么，我都不能让我的页面像这样工作。
另外:如果你知道一种“自动缩放”的方法，使居中的内容在不显示空空间的情况下被完全显示，那么你就会得到额
浏览 3提问于2021-04-21得票数 0
有没有办法在flutter中以不同字体格式复制文本文件当我将复制的文本文件数据从flutter粘贴到任何以纯文本显示的应用程序中时，它不会显示我在flutter应用程序中设置的字体我如何使用其字体格式复制文本文件数据
浏览 19提问于2019-03-24得票数 0
2回答
Restlet响应类型
、、、、
如何以所需格式返回Restlet响应？我使用的方法是：
@Get ("json")
public Address sendResponse(){
Address add = getAddress();
return add;
}
现在，我必须显式地将java对象转换为json字符串作为对浏览器的响应。它不能由Restlet框架本身来处理吗？
Spring MVC的Restful实现可以做到这一点。我也在寻找Restlet中类似的实现。
浏览 1提问于2012-03-13得票数 2
回答已采纳
简单的问题：
例如，在默认情况下，当我有这样的文件时：
<html>
<div style="backgroundcolor:red;height:25px;width:100%;">
</div>
</html>
我得到了一个div，它的边距大约是窗口边缘的10px --有一些空白，甚至连文本都不能填充。
但是当我这样做的时候：
<html>
<div style="backgroundcolor:red;height:25px;width:100%;position:absolute;to
浏览 3提问于2012-05-20得票数 0
回答已采纳
3回答
我正在用vb.net (visual basic)编写一个程序，它有两种形式。我有一个作为“主”的基础，它将成为一切的幕后推手。然后我有另一个额外的表单，它应该放在"main“表单的顶部。当我显示这两个窗体时，我会让它工作，但我希望较小的(附加)窗体居中显示在主窗体上。如果你想要更简单的感觉，它是一个大盒子里的一个小盒子(全部居中对齐)。有人知道怎么做吗？
谢谢
浏览 3提问于2010-01-27得票数 0
1回答
如何在表格中设置位置？我有表，其中我有跨度和某些链接。我将<td>设置为居中对齐，并从居中开始跨文本，但当我对所有链接<td>执行相同操作时，所有内容都显示在居中。但是我需要从相同的位置开始所有的文本。该怎么做呢？
浏览 0提问于2010-04-09得票数 0
回答已采纳
如何以编程方式将基本页脚设置为UITableView？
只是居中的文本吗？
编辑：
如何设置条颜色和固定在屏幕底部的页脚栏位置，或者如果拇指不占满整个屏幕，则页脚不在屏幕底部上方。
浏览 0提问于2011-02-25得票数 7
回答已采纳
我有一个带有文本字段和提交按钮的网页。该网页被加载到UIWebView中。
如何以编程方式按下该网页的提交按钮？
或者，如何以编程方式使网页中的文本字段成为第一响应器并显示软键盘？只需以编程方式重新创建相同的行为，就像用户触摸了网页上的文本字段一样。
我想假设页面的来源是未知的。
这不是一个UITextField，它只是一个在UIWebView中显示的网页中的。
提前谢谢。
浏览 0提问于2011-04-11得票数 0
回答已采纳
1回答
在Windows窗体和HTML文本框中，不可能在不影响同一文本框上的当前用户操作的情况下追加文本。
我的用法是我不断地获得新的文本(从语音到文本应用程序)，并且需要在公共屏幕上显示最后3行。最近的3行可能会被人类实时编辑改变。人工编辑器所做的所有操作对公众观众都是可见的。
我目前的方法是开发两个应用程序，一个发送者和一个编辑器应用程序。发送者应用程序接收语音到文本应用程序的输入，该应用程序逐句插入。接收应用程序接收每个字母/句子并将其添加到编辑器文本框中。
我无法想象，当将新文本附加到编辑器文本框时，只需存储和恢复编辑器文本框的carret位置即可。
你知道如何才能做到这一点:不断地将新文本应
浏览 0提问于2018-02-16得票数 1
1回答
我想对齐一个图像和一个简短的文本居中，相对于视口。我希望有图像后面的文本在同一行，当它有足够的空间，如风景。当在同一行中没有足够的空间时，我希望文本在图像下滑动，并且两者仍然居中！任何想法都将受到欢迎。
浏览 0提问于2016-02-14得票数 0
1回答
我使用创建了一个jQuery accordion。查看。
它工作得很好，除了我希望手风琴在页面上垂直居中。这个想法是，随着手风琴的高度变化，DIV将不断地重新对齐，使其垂直居中。手风琴将显示为从页面中心展开，而不是从顶部向下滑动。
浏览 0提问于2012-03-24得票数 0
回答已采纳
我不明白为什么字幕文本不会居中，为什么在响应约束中移动时绿色背景会从图片下面移出。我相信有一个简单的解决方案，但我有一些重叠的CSS，我认为可能会抵消其他CSS。
浏览 18提问于2021-08-31得票数 0
4回答
居中文本不工作
、、
我有一个带文本的span和一个包装它的div。我正在尝试在span中居中显示文本。我尝试使用flexbox将其居中，但它不起作用。它是水平居中的，而不是垂直居中的。我做错了什么，我如何才能纠正它？ ( span存在的唯一原因，是为了让我可以将文本居中。如果我可以在不使用span的情况下将文本居中，那么我就不会使用它。) JSFiddle #headerScrollDown {
font-size: 85px;
font-family: monospace;
border: 2px solid black;
border-radius: 50%;
width:
浏览 64提问于2016-09-02得票数 0
回答已采纳
3回答
我希望<p>文本显示与图像一致，所以一切看起来都是居中的和对齐的。
另外，当屏幕变短，文本采用2+lines (响应)时，我也希望保持不变，这样文本就不会在图像下面。
我怎样才能做到这一点？
浏览 3提问于2014-04-05得票数 2
回答已采纳
2回答
在基础中居中显示模型
、、、
我想要在基础中显示模式的中心位置。
我使用的I代码如下：
#quickViewModal{
height: 400px;
width: 600px;
top: calc( 50% - 200px ) !important;
left: calc( 50% - 300px ) !important;
margin: 0 !important;
}
但是，此代码不支持响应式设计。例如，如果用户调整窗口的宽度为500px，则模式将被切断。我也不能使用百分比宽度。
如何创建一个显示并保持在中心位置的显示模式？
更新:似乎模式会自动水平居中，但不是垂直居中。
浏览 2提问于2015-02-01得票数 3
如何使用javascript、css和/或html在表格单元格中的图像上居中显示文本？
我有一个包含图像的HTML表-所有图像的大小都相同-并且我想在每个图像上居中放置一个文本标签。标签中的文本大小可能不同。水平居中并不难，但垂直居中却很难。
附录:我最终不得不使用javascript使用固定大小的div和绝对定位来可靠地将文本居中；我只是无法让它以任何其他方式工作。
浏览 2提问于2008-09-18得票数 1
回答已采纳
当输入超过2个字符时，文本字段不再居中，只有在完成键入后，文本才会在文本字段中居中。怎样才能连续地使文本居中？
浏览 0提问于2018-04-14得票数 1
2回答
我希望能够在导航栏中居中显示一些文本或图像，这就是我正在做的事情。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="text-center navbar-text"
浏览 1提问于2014-12-13得票数 1
我想以编程方式更改dijit/form/NumberSpinner值。如何使用“data-dojo-attach-point”或“id”实现此功能
下面的代码更新了数字旋转文本，但是它给了我
"Uncaught : c.advice.apply不是函数“错误。
如何以编程方式正确地更改值？
this.typeResidential.set('value', 30);
浏览 4提问于2017-03-21得票数 2
回答已采纳
1回答
我有下面的菜单，在左边显示图标的项目。
我知道OS的默认设置是左边有这么多白色，但我想让图标居中显示在文本和边缘之间。
有没有办法使这些图标居中？
浏览 1提问于2012-12-13得票数 1
1回答
.loading-icon {
pointer-events: none;
margin: auto;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin: 50px 0;
line-height: 25px;
在firefox和chrome中，对象在页面中居中，而在IE10上，对象不是居中的，而是向左显示的。
浏览 1提问于2014-05-27得票数 0
回答已采纳
3回答
实际上，我想知道如何正确地将按钮中的文本居中。我使用的是一种自定义字体，无论我做什么，它都不会使我的文本在按钮内居中。 我已经发现，对于标准字体(我猜是它的Roboto)，它也不能完美地居中对齐，但这在这一点上并不是很烦人。 下面是我的代码： RaisedButton(
onPressed: () {},
child: Text("LOG IN"),
), 下面是它对我的自定义字体产生的结果： ? 这里是标准的Roboto： ? 非常感谢!
浏览 41提问于2020-04-13得票数 0
回答已采纳
3回答
我正在尝试设置代号为1的文本字段中的文本对齐方式。我已经创建了一个样式来设置对齐，但它不起作用。
我可以设置右对齐和左对齐，但不能设置居中对齐。我想知道如何在文本字段中居中显示文本(值)。
有人知道怎么做吗？
提前谢谢你。
浏览 4提问于2016-03-24得票数 2
1回答
我试图在我的文本视图中居中一些代码，但它似乎总是左对齐：
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_above="@+id/myButtons">
<!--
浏览 0提问于2014-01-24得票数 0
2回答
"li“内联元素的高度
、、、
我正在尝试将具有"display:inline“的"li”的高度设置为css。我知道inline元素会重置高度，但我需要它是display:inline只是为了文本对齐列表居中。
这是我的css：
li{
font-size: 28px;
border-right: 1px solid #b9b9b9;
margin-right: 15px;
padding-right: 15px;
line-height: 40px;
display: inline;
text-align: center;
color: #ff
浏览 0提问于2012-11-16得票数 1
回答已采纳
1回答
我正在尝试在卡片视图上显示图像，如下图所示：
<code>B0</code>
这是我的代码，但在运行时，我可以简单地看到卡片视图，图像和文本视图不显示。
<code>A1</code>
我尝试使用线性布局实现网格项目(图像和文本视图)，它们是可见的，但使用线性布局时，设计没有响应，图像和文本视图没有正确的居中对齐。我是android开发的新手。
浏览 11提问于2021-06-12得票数 1
2回答
在下面的故事板中，我添加了标签和文本字段之间的水平间距。但当我在屏幕上运行它时，标签上没有显示任何数据。因此，我所做的是在标签上添加垂直居中。然后它就起作用了。但我需要知道为什么标签和文本字段之间的水平间距不足以在模拟器上完美地显示布局。
浏览 5提问于2018-11-10得票数 0
1回答
我对stackoverflow和HTML和CSS的使用都是新手，所以提前为我可能犯的任何新手错误道歉。 我的目标是创建一个带有选项网格的菜单，这些选项是图片，一旦你将鼠标悬停在其中一张图片上，它将变得模糊，相应的文本将出现在图片的中心。 我想放置这样的对象：https://codepen.io/Polyglotton/pen/BapOLBO 在响应式网格中。 这就是我到目前为止所拥有的；https://codepen.io/Polyglotton/pen/jOyvMQb 我遇到的问题是，一旦进入网格，文本就不再居中。我认为可能的解决方案是将文本放在它自己的<div>中，我已经尝试
浏览 23提问于2021-04-19得票数 1
我需要在WPF CheckBox中应用一个TextWrapping。
请看这两个示例：
<CheckBox>
<TextBlock TextWrapping="Wrap"
Text="_This is a long piece of text attached to a checkbox."/>
</CheckBox>
<CheckBox>
<AccessText TextWrapping="Wrap"
Tex
浏览 0提问于2010-06-01得票数 15
我已经创建了以下饼图：
我想在饼图中居中显示数字"100“，并使其在调整窗口大小时做出响应。目前，文本居中，但没有响应性。
function(chart) { // on complete
var textX = chart.plotLeft + (chart.series[0].center[0]);
var textY = chart.plotTop + (chart.series[0].center[1]);
var span = '<span id="pieChartInfoText" styl
浏览 4提问于2017-03-08得票数 0
回答已采纳
2回答
我希望垂直居中悬停文本覆盖，这是响应性的。我试过了
position:absolute
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
设置样式。这会将div的左上角与文本覆盖居中，而不是文本本身。
这是一个jsfiddle：
有没有一种方法可以在顶部/左侧使用转换来居中文本本身？
我确实引用了，但我无法使用其他方法，比如垂直对齐。
非常感谢--
浏览 2提问于2016-11-02得票数 0
我正在尝试构建一个弹出窗口，包含不同的文本消息供用户响应。
我寻找了一种方法来居中文本(标签)和按钮在该窗口-但没有成功。
弹出窗口具有确定的大小。使框架居中应该考虑到文本标签的宽度和高度(在字母数量中定义)。
正如你在代码中看到的，w，h定义窗口的大小，xbias，ybias有一个以testframe为中心的表达式(两者都包含alpha1，alpha2作为文本大小的校正因子)
我正在寻找alpha1，alpha2 (现在等于1)的数学表达式……或者更好的方式来构建这样的弹出窗口。
root = Tk()
w = '400'
h = '100'
roo
浏览 5提问于2017-09-06得票数 2
回答已采纳
我正在尝试实现一些在UIKit中非常简单的东西--一个视图总是在中心(图像)，第二个视图(文本)在它的顶部，两个视图之间有一些间隔。我尝试了许多不同的方法(主要使用alignmentGuide，但没有一种方法能像我希望的那样工作)。
代码：
ZStack {
Rectangle()
.foregroundColor(Color.red)
VStack {
Text("Test")
.padding([.bottom], 20) // I want to define spacing between
浏览 6提问于2020-08-07得票数 1
在我的Android应用程序中，我有一个ImageView，它显示来自资源的图像。我需要做的是在图像中显示一个几乎居中的文本(我所说的几乎居中是指与靠近图像中心的矩形对齐)。我知道这个点的(x，y)坐标(以像素为单位)，但当我从一个设备切换到另一个设备时，这个像素当然会发生变化。我尝试过使用dp，但没有成功。
所以，我想要做的是在这个矩形内显示文本。我有矩形每个点的(x，y)坐标(相对于仿真器的像素)。
我该怎么做才能让这个设计响应式的呢？
谢谢
浏览 1提问于2015-09-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
