文本居中时如何继承父div？
在前端开发中，要实现文本居中时继承父div的效果，可以使用以下方法：
- 使用flex布局：将父div设置为display: flex，并添加justify-content: center和align-items: center属性，这样子元素就会在父div中水平和垂直居中。
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="parent">
<p>居中的文本</p>
</div>- 使用绝对定位：将父div设置为相对定位（position: relative），子元素设置为绝对定位（position: absolute），并设置top: 50%和left: 50%以及transform属性来实现居中效果。
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="parent">
<p class="child">居中的文本</p>
</div>这些方法可以实现文本在父div中的居中显示。对于更复杂的布局需求，可以根据具体情况选择合适的方法。
相关·内容
我正在尝试将表格标题中的文本居中，以便与下面的文本对齐。我似乎就是不能让标题对齐。
<div class="container">
<div class="text-center">
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum
</p>
<div class="table-responsive">
<table class="table table-striped"&
浏览 2提问于2017-10-23得票数 6
回答已采纳
2回答
我尝试将文本元素在流畅的布局中居中，这意味着<div>的大小不是固定的。
我发现了一个非常好的解决方案，可以将父<div>中的子<div>水平和垂直居中，它的工作方式是：。(原文来自)
但是，如小提琴中所示，Large Text元素并不是垂直放置在父<div class="block">的中心，而是整个子<div class="centered">居中。
我尝试将这两个文本元素拆分为两个单独的<div>，并将只包含Large Text元素的那个放在中心。但是，当包含small text的第二
浏览 0提问于2012-08-21得票数 0
2回答
我的css，这样我就可以得到浏览器的宽度和高度：
body, html {
margin:0;
padding:0;
line-height: 1.5em;
height: 100% !important;
width: 100% !important;
}
这就是我希望它的孩子们成为中心的东西：
<div style={{marginLeft: 'auto', marginRight: 'auto', width: 'inherit', height: 'inherit'}}>
浏览 26提问于2017-08-23得票数 0
我有一个带有居中列标题的b表。当我在本地运行时，头是居中的，而不是在部署中。为什么会这样？
我已经尝试了两种方法来对头部进行居中。我把文本中心的道具添加到了b-table组件中，就像这样.
<b-table
striped
hover
show-empty
sort-icon-left
:items="items"
:fields="fields"
class="text-center"
>
&l
浏览 4提问于2020-07-30得票数 2
回答已采纳
4回答
我正在使用以下代码居中对齐我的网页，
#parent{
margin:0 auto;
width: 960px;
}
<div id="parent">
<!--more code goes here-->
</div>
属性已移动到所有子div's，导致它们居中对齐。我不是一个CSS程序员，但我记得有一个技巧可以让父div元素只粘着父div。请帮帮忙。谢谢
浏览 0提问于2012-09-30得票数 0
4回答
我有一个带有多个子浮动div的浮动容器。
我希望所有这些浮动的子div相对于浮动的容器居中对齐(而不是文本对齐)。
我该怎么做呢？
在同一时间，这些子div中只有一个在浏览器上可见，..User单击上一个/下一个来查看其他子div(有点像旋转木马)
显然，如果我为子div使用float:left，我会遇到居中对齐的问题。
浏览 4提问于2011-10-16得票数 3
回答已采纳
我有一个有两个孩子的家长。父div获取视口高度。第一个子(标题)必须位于顶部，而第二个子(文本包装)必须垂直居中。如何确保无论屏幕大小如何，文本包装器都是垂直中心的？
一种可能的解决方案是将头设置为绝对，并设置top: 0px。然后，通过设置对齐项: center，可以轻松地对齐文本包装器。但是，由于我最近学习了视口单元，我想知道是否可以使用vh/vw等。我只是不知道如果文本包装的高度是流动的，我如何使用vh来对文本包装进行居中。
链接到小提琴：
我父母div的结构：
<section id="zero">
<div id="header"
浏览 4提问于2021-09-26得票数 0
回答已采纳
5回答
当我尝试垂直对齐内部DIV居中时，我的居中不起作用...
我的问题出在哪里？
CSS代码：
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
vertical-align: middle
}
HTML代码：
<div id="page_bar">
<div class="page_bar&
浏览 0提问于2012-08-18得票数 0
回答已采纳
<div>
<span style= "background: red; text-align: center;">
There is an error
</span>
</div>
文本居中对齐不起作用。我想要的文字居中与背景。
浏览 1提问于2019-02-11得票数 1
2回答
它很容易用毛边0自动对长的文本进行居中，并用边距或填充控制距离。
但是，是否可以在不知道宽度的情况下将文本居中，如果文本是左对齐的？
在短文中间居中
文本对齐左
我不知道宽度
下面是要检查的示例：
CSS：
#long {
margin:50px auto;
text-align:left;
padding: 0px 100px;
background:white;
}
#short {
margin:0px auto;
text-align:left;
}
HTML：
<div id="long"&g
浏览 0提问于2013-04-24得票数 3
回答已采纳
创建div大小的链接非常容易()，就像在div中垂直居中文本()一样。
但是如何将这两者结合起来呢？
如果我将链接的宽度和高度设置为100%，它将不再居中。
浏览 0提问于2017-03-28得票数 0
如何用较大的CSS对较小的文本进行居中？
这是我的代码：
<div class="header">
<div class="navbar">
<img src="img/logo.png" alt="" style="">
<font color="white">LOGO</font>
<div class="menuleft">
浏览 5提问于2016-12-18得票数 0
回答已采纳
由于某些原因，我的文本区域DIV不能继承
margin: 0 auto
从它的父级：
*
{
padding: 0;
margin: 0 auto;
}
这是我的的链接
我如何才能使文本区域DIV真正居中呢？
浏览 0提问于2010-08-01得票数 1
回答已采纳
6回答
DIV居中对齐
、、
我有div，它的所有内容都对齐到中心：
<div align="center">
<table><tr><td>.....
但是align不是更有效的属性。因此，我已经更改为class或style：
<div style="text-align:center;">
但这和以前不一样了。表格现在左对齐，而不是居中对齐。显然，文本对齐不等同于旧的居中属性。我应该如何编写样式，以实现与以前使用center属性相同的功能？
浏览 2提问于2014-11-04得票数 4
当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。
HTML：
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS：
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: le
浏览 3提问于2012-10-10得票数 4
回答已采纳
1回答
我有一个父容器(类似于弹出窗口)，其中有一个子元素附加到父容器中。子元素是一个包含一些文本的div。我想让文本在div中居中，这样文本在子div中保持居中对齐，但当文本超过3-4行时，文本应该垂直对齐。我可以在文本增长时垂直对齐，但当它仍然是一个小文本时，它应该垂直居中，这是不会发生的。我在子类中尝试了很多css属性。任何帮助都是好的。
.parentclass {
position: absolute;
top: 110px;
left: 165px;
width: 470px;
height: 260px;
text-align: center;
background-i
浏览 1提问于2012-12-28得票数 0
2回答
在火狐浏览器中查看，但在Google中查看时，input type=submit元素内外的input type=submit按钮以margin: auto为中心：
HTML：
<div>
<input type=submit value=submit>
</div>
<input type=submit value=submit>
text continues from here...
CSS：
div {
width: 200px;
background: green;
}
input {
display: block;
margi
浏览 0提问于2012-06-01得票数 1
回答已采纳
2回答
我正在努力使用flexbox容器和bootstrap 4对齐以水平为中心的元素。
到目前为止，这就是我所拥有的：
<div class="d-flex flex-column align-items-center">
<img class="rounded-circle" height="50">
<a href="https://some.external.link" target="_blank">
Follow me
<
浏览 0提问于2018-02-05得票数 0
回答已采纳
我发现这个非常有趣。它可以在任意高度的div中对任意长度的文本进行垂直居中。基本上，它直接在包含文本的节点前面使用一个空的<span>标记，并且
HTML：
<div>
<span></span><p>This is really really long text but it will be centered vertically.</p>
</div>
CSS：
div {
background: yellow;
color: red;
width: 200px;
浏览 1提问于2016-03-09得票数 4
回答已采纳
2回答
在表格标题中，th标签的默认文本对齐方式是居中。
考虑以下代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: aliceblue;
}
.default_grid {
text-align: left;
width: 600px;
浏览 0提问于2012-07-04得票数 6
回答已采纳
1回答
我有有3列的div，我已经将文本水平地居中，但是我不知道如何垂直地居中文本。我试着用垂直对齐，但没什么用。
.row {
margin: auto;
width: 90%;
height: 100px;
background-color: #c42747;
opacity: 90%;
border-radius: 10px;
}
.column {
float: left;
}
.side {
text-align: center;
font-size: 25px;
width: 25%;
}
.middle {
font-size: 18
浏览 3提问于2022-07-12得票数 0
回答已采纳
1回答
<div style="width:400px">
<p style="text-align:center">
<a>
<img src"..." />
</a>
Some text..
</p>
</div>
因此，这里的目标是在div中居中显示图像。文本对齐:居中处理不在超链接标记内的图像，但一旦它们在超链接标记内，它不会影响它们，只影响文本。
我不想使用display:block和margin left / rig
浏览 2提问于2013-09-19得票数 1
3回答
我用CSS垂直地居中了一个div，它工作得很好。但是我有一个背景，当我调整浏览器的大小时，文本就会离开背景。
.wrapper{
height: 100%;
width: 100%;
background: rgba(51,51,51,.5);
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle
浏览 8提问于2015-09-28得票数 0
回答已采纳
我尝试将数字42垂直居中放置在其父div中。父div有display: flex (出于其他原因，我需要它)。当我在数字上设置align-self: center时，文本的中心在div的中心之上。
我猜这是因为它将文本居中，就好像它有一样，但在本例中，我只呈现了一个数字，所以永远不会有下降项。如果文本都是大写的，同样的问题也会发生。
如何使此数字垂直居中显示？
.container {
height: 4.5cm;
display: flex;
background-color: #c2fcb6;
}
.child {
font-size: 96pt;
align-se
浏览 7提问于2021-10-10得票数 2
我有一个div，我希望它的宽度是基于div中的文本的动态宽度。我发现这可以通过将div的display设置为inline-block来实现；然而，现在我不能让div与display一起居中。我不想在div或html主体上使用text-align: center，因为我不希望div中的文本居中。不管有没有内联块，我都愿意解决这个问题。只要div居中并且div宽度是基于文本的动态变化，那么我就很高兴。
<div id="wrapper">
<p>Text that will change div width.</p>
</div&g
浏览 0提问于2020-12-11得票数 0
1回答
我在Firefox的文本输入字段中垂直定位文本时遇到问题。我已经设法让它在除了firefox之外的所有浏览器上都能工作：
看到“Fwd：”文本是如何挤在顶部的吗？我需要在场内垂直居中。
这是我的css：
.subject {
clear: right;
font-family: Helvetica, Verdana, Arial, sans-serif;
height: 1.6em;
width: 500px;
font-size: .88em;
margin-bottom: 20px;
padding-left: 5px;
padding-top: 5px;
line-height: 1.
浏览 3提问于2010-03-10得票数 2
回答已采纳
嗨，关于这段代码，我有三个问题，
1)为什么黑底的div没有覆盖红底的div？
2)为什么文本位于它所包含的div之外？
3)如何使图片和文本在第三个div居中并垂直居中找不到垂直对齐的答案
4)如何使黑色背景覆盖100%的宽度和高度...宽度: 100%可用，但高度: 100%不行？
浏览 4提问于2011-06-21得票数 0
回答已采纳
4回答
我有一个文本，我想用一种特定的颜色来表示下面的文本。我希望文本居中，所以我使用
margin: 0px auto;
但它并不位于中间，而是位于屏幕的左侧。简单地说，居中元素的最简单和最有效的方法是什么。任何元素。
浏览 0提问于2014-03-22得票数 0
3回答
我试图制作一个响应的网页，使用html，css和引导。
如何对文本进行居中，相对于图像位置？图像必须位于文本的左侧。
以下是一些代码：
<div class="col-xs-1" style="background-color: black;">
<div>
<img style="float: left;" src="~/Content/img/Assets/img1.png" alt=""
浏览 3提问于2017-04-12得票数 0
回答已采纳
实际上，我正在练习在div中将文本垂直居中。我已经在网上阅读了很多说明。但我喜欢其中的一个，我可以将容器div显示为表格，然后将其中的子div (在本例中为.middle)显示为表格单元格。它起作用了。但唯一的问题是，每当我试图将div的高度设置为100%时，.container都会被压缩到文本行。但是，当我显式地定义.container div的高度时，我就能够在文本完全居中的情况下获得所需的宽度。
谁能解释一下这是为什么？请参考图片截图以更好地了解这一点。
html,
body {
height: 100%;
width: 100%;
left: 0p
浏览 0提问于2016-05-24得票数 1
2回答
我有一些图像，我想要显示在我的文本后面，我希望文本在父div中居中(水平和垂直居中)，但每当我将“top”值更改为50%时，文本就会跳到父div之外的页面顶部。 我正在使用Bootstrap。 .row_comm {
.community-body{
position: absolute;
top: 50%;
}
img {
display: block;
width: 100%;
}
} <link rel="sty
浏览 17提问于2019-03-06得票数 0
回答已采纳
3回答
我可以成功地在CSS中对文本框进行居中。但是居中的Textboxes没有对齐。我如何对齐它们？
我的html代码：
<div data-bind="dxList: { dataSource: dataSource}">
<div data-options="dxTemplate : { name: 'item' } ">
<div class="wrapper">
<div data-bind="text: name
浏览 3提问于2016-11-16得票数 0
回答已采纳
2回答
我正在尝试居中文本(水平和垂直)，我在这方面有一点困难。
这就是我尝试过的，但它只是水平居中，而不是垂直居中。
如何将此文本置于中心位置？
<div class="playerDetailsPage">
<p>
<h4>The text will be in the center</h4>
</p>
</div>
css
.playerDetailsPage {
background-color
浏览 0提问于2014-05-29得票数 3
回答已采纳
2回答
我有2个图片在我的主页上，这是垂直居中。
#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;
}
但是，我希望它们在水平和垂直方向上都居中。
当我不使用float: none !important;时，图像水平居中，而不是垂直居中。当我使用f
浏览 3提问于2016-03-11得票数 0
外型有一定的宽度。但内部div的宽度应与其文本内容相等，内部div应以水平居中。
<div id="outer">
<div id="inner">
Hello....
</div>
</div>
浏览 2提问于2015-01-05得票数 0
回答已采纳
我想在文本溢出时使用display: flex;作为居中，同时也有一个...溢出。似乎我一引入display: flex，省略号就停止工作了。对如何将这两者结合起来有什么建议吗？JSFiddle：
.target {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: red;
margin: 2rem;
display: flex; /* remove this to get ellipsis to show */
}
<div class="targ
浏览 0提问于2017-08-04得票数 6
3回答
当图片小于线条高度时，将图标居中的最好方法是什么？
例如(样式为内联以便于阅读)：
<div style="line-height: 20px">
<img style="width: 12px; height: 12px;"/>
Blah blah blah
</div>
。此示例还说明了vertical-align: middle无法工作的原因。
我希望img相对于div的文本居中。也就是说，即使文本换行到多行，图像也会相对于单行居中。理想情况下，该解决方案不需要在图像上设置边距/填充，即使我不知道行高也可以工作。
浏览 2提问于2010-06-16得票数 27
回答已采纳
如何在列中垂直居中文本(bootstrap 4)？结构是基本的，请参见：
<div class="row">
<div class="col-md-6">
<span>Text to center</span>
</div
</div>
伙计们！
浏览 0提问于2017-01-25得票数 26
回答已采纳
如何在浏览器中使div居中，使其即使在浏览器宽度小于div宽度时也保持居中？
我目前使用的是：
BODY
{
text-align: center;
}
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
但当我调整大小时，浏览器的左侧会阻塞div。
浏览 2提问于2010-09-30得票数 0
回答已采纳
我在我的项目组合中使用Skrollr来实现一些文本淡出效果。我的所有文本都响应Skrollr数据锚点，但<a >中包装的任何链接文本除外。下面的<p>包含<a >，可以正确淡入，但<a>保留默认页面样式。有没有关于为什么和如何修复它的想法？
<div class="card" id="about">
<div id="aboutwrapper" data-350="color:rgb(255,255,255);"
data-700=
浏览 3提问于2015-02-08得票数 1
我有一个不会对齐中心的图像。我确信我做的是大错特错的事情。如何将此图像居中？我已经尝试了样式，边距自动，居中-块，居中-文本等。没有工作。
在所有小型移动设备上，320px图像都是居中和全宽的，而那些较大的移动设备(更宽的iPhones、HTC、GalaxyS5等)则左对齐。
<header id="about2" class="about-mobile visible-xs hidden-sm" style="background-color:#20aab4; margin-top:0;height:661px;">
<
浏览 2提问于2014-12-24得票数 1
我想在垂直居中的柔性盒/引导列中显示一个可选的文本后缀。它只应该显示在小屏幕上。下面的代码可以工作，但只有当我在span元素上使用"display:contents“时才能工作，而span元素没有完美的浏览器支持。如果删除"display:contents"，文本后缀将显示为另一列。如何在不使用display:contents的情况下，使文本后缀与前面的文本流？
<div class="row">
<div class="col-2">
<img src="data:image/gi
浏览 1提问于2021-03-09得票数 1
回答已采纳
1回答
% height的行高
、、、
当我想在div中将文本垂直居中时，例如添加line-height；
<div class="text"> Text </div>
.text{
height:50px;
line-height:50px;
}
但是如果height:5%，如何为line-height赋值以在div中将文本垂直居中？
浏览 0提问于2012-12-21得票数 0
通常情况下，margin left: auto和margin right: auto会在父div中居中放置div，但此解决方案基于视点大小，这意味着如果父div大小大于视点，则仅将子div居中于父div的可视部分。
如何根据父级的实际大小居中子div，而不是基于父级的视点大小？
谢谢,
浏览 0提问于2013-12-13得票数 0
我试图将两个相邻的divs中的文本居中，但我不能理解我做错了什么。
基本上，我有两个divs，每个窗口的50%。第一个div包含一个图像(我成功地将其居中)，并且我尝试在第二个div中将文本居中。下面是我的，我使用了下面的css：
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
没有意义的原始DOM结构或CSS (主要是有两个div
浏览 0提问于2014-03-12得票数 0
2回答
在一个非常简单的网页中，我想创建一个包含一系列推文的div，代码来自推特。
此div应该在页面中水平居中；我尝试使用
<div style="text-align:center">
并使用
<div style="width: 900px; display: block; margin-left: auto; margin-right: auto;">
就像在文章中一样。第一个解决方案不使div居中；第二个解决方案在宽度增加时逐渐将div移到页面的左侧(并且div居中的宽度较小，例如200、300)。
还有其他的解决方案吗？如果可能
浏览 0提问于2014-10-22得票数 0
2回答
CSS垂直对中文本
、、、
我正在尝试垂直中心文本，我使用技巧与翻译。
<div class="first">
<div class="second">
<span>TESTING</span>
</div>
</div>
CSS
div.first > div.second {
border: 1px solid red;
height: 2em;
}
div.first > div.second > span{
position: relati
浏览 1提问于2014-08-28得票数 0
1回答
我试图在行div中居中显示一些文本。引导程序类text-center似乎只有在文本较长时才有效，但对于一个或几个单词则不起作用。
它与以下各项配合使用：
<div class="row innerpage-dark text-center">
<h2>Portfolio lorem ipsum dolor sit amet</h2>
</div>
但它不是这样：
<div class="row innerpage-dark text-center">
<h2>Portfoli
浏览 0提问于2017-06-25得票数 0
我正在尝试将包含图标的列表项居中。
我可以通过添加父div容器而不是图标来使文本居中！
<div class="ui center aligned container">
<div class="ui list">
<div class="item">
<i class="large call icon"></i>
<div
浏览 14提问于2019-07-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
