1回答
有没有一种方法可以在固定大小的div中对可变大小的多行内容执行垂直居中，并隐藏溢出？
目标是重现您在Excel单元格中可以看到的内容:当内容适合容器时，它应该垂直居中，当它较大时，溢出的部分应该隐藏(并且内容仍然垂直对齐)，就像在相邻内容不为空的Excel单元格中一样。
我知道如何使用CSS垂直居中，我知道如何在内容不垂直居中时隐藏溢出，但我不知道如何同时做到这两个…Javascript是唯一的答案吗？
诀窍在于CSS定位方法不适用于可变大小的内容(我的内容是动态文本)，当您使用display:table-cell时，它会有效地禁用CSS溢出控制(容器会增长以容纳内容)。
浏览 1提问于2010-05-11得票数 2
回答已采纳
2回答
想用CSS垂直居中div。不想要表或Javascript，但只有纯CSS。找到了一些解决方案，但都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器（包括Internet Explorer 6）中垂直居中div？
浏览 572提问于2017-12-06
我的.cent类是用于<li>元素的。我想让<li>的文本水平和垂直居中。text-align:center;负责水平居中，但垂直居中不起作用。CSS的诀窍是什么？
.cent{
height:20px;
width:20px;
text-align:center;
vertical-align: middle;
}
浏览 5提问于2010-12-16得票数 5
回答已采纳
我正在使用这个脚本水平和垂直居中我的div。
当页面加载时，div会垂直居中，而不是水平居中，直到我调整浏览器的大小。
我做错了什么？
$(document).ready(function (){
$(window).resize(function (){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
浏览 5提问于2012-12-17得票数 36
回答已采纳
46回答
我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器(包括Internet Explorer6)中将div垂直居中？
浏览 37提问于2008-12-28得票数 1523
回答已采纳
我有这个：<li>+</li>，我试着将文本居中。对于水平居中，我使用line-height。如何使用CSS进行垂直居中？
这是一个演示：
浏览 1提问于2011-12-03得票数 0
回答已采纳
3回答
我有一个水平居中的网页，但相当短-它只占垂直页面的一半。我想让它居中。如何使标签垂直居中？我不能有一个静态的高度，所以这不是一个选项。如果CSS不够强大，我可以使用Javascript来完成吗？谢谢!
浏览 0提问于2011-08-22得票数 2
回答已采纳
使用javascript设置内容样式有问题吗？
我的网站需要javascript。在我的网站上有这样的文字，我想要垂直居中。文本长度可以是2行，也可以是3行。使用javascript，我可以很容易地将它垂直居中。CSS垂直居中的方式看起来很复杂，而且还包括IE hack。
那么，考虑到我已经决定我的网站将需要javascript，那么我使用javascript进行这种样式有什么缺点吗？
浏览 4提问于2010-03-08得票数 0
回答已采纳
2回答
我正在尝试遵循这个教程，让图像在div的中心对齐：
这是我正在处理的页面：
你看到右边的“加入群组”按钮没有垂直居中了吗？
我正在做这个css：
width: 280px;
float: right;
border: 1px solid;
margin-bottom: 5px;
vertical-align: middle;
display: block;
display: table-cell;
我想过关于垂直对齐的部分:居中；可以做到这一点，但事实并非如此。有没有办法让按钮垂直居中？
谢谢!
浏览 0提问于2011-05-30得票数 0
回答已采纳
2回答
lot / mobile需要在移动设备上工作，但是当我把我的ipod转到垂直方向时，它发生了巨大的变化，我的问题是我需要所有的东西，文本框，按钮和图像垂直居中，或者在旋转时改变。我认为将div垂直居中是最好的选择，那么我应该使用什么css？
目前我已经尝试过：
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
但这不起作用，所以也许它应该只在旋转后居中？有什么想法吗？
浏览 1提问于2013-05-06得票数 1
回答已采纳
1回答
我必须为垂直菜单栏编写一个简短的css脚本。
第一项应停靠在左侧，最后一项应停靠在右侧。
中间的项目应该垂直地居中。菜单栏本身也应该垂直地居中。
我读过一些文章，但都失败了。
我的资产：
html标记：
使用的css：
有人能告诉我我做错了什么吗？如果调整页面的大小，项目是垂直浮动的，我知道原因，但如何才能做得更好呢？给我一个主意，小费或者网站？谢谢
浏览 1提问于2015-01-22得票数 0
我试图使一个链接，其中有一个height和一个200px的width。链接的文本应垂直居中和水平居中。
到目前为止，这是我的CSS：
a:link.Kachel {
width: 200px;
height: 200px;
margin: 0 auto;
display: block;
text-align: center;
background: #383838;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-al
浏览 0提问于2013-02-14得票数 44
回答已采纳
CSS中一个非常常见的问题是如何垂直对元素进行居中。既然CSS3能够产生如此多的特殊效果，它们为什么不将垂直中心函数包含到CSS3中呢？
我不认为这是一个很难添加的函数，即使是初学者开发人员也可以使用javascript来实现中心功能。有了这么多针对不同情况的黑客攻击，很明显，仅用CSS就可以将事情垂直地居中。所以，也许还有其他的原因，他们决定不让它成为一个标准的财产？
浏览 3提问于2015-03-26得票数 1
回答已采纳
5回答
我需要使用CSS在他们的容器<li>块中垂直居中一些图像，但我不确定如何去做。我可以求助于使用javascript来计算图像的高度，然后做一些数学运算，使用页边距将图像垂直居中，但这似乎既笨拙又愚蠢。
有没有什么好的基于CSS的解决方案可以在不使用固定边距的情况下完成垂直对齐(图像高度是可变的)？
贴在容器li元素顶部的图像：
浏览 1提问于2012-10-04得票数 2
回答已采纳
1回答
我有一个关于如何在html / css的div中居中显示文本的问题。我有一个这样的h3标签
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
和css
h3 {
width: 100%;
height: 28px;
display: block;
}
如果我有一个长度超过1行的名称，那么文本的2行适合div，但如果只有1行，我希望它垂直居中，而不是顶部对齐。
编辑:我有这个布局，我希望在这两个div中的文本垂直居中
浏览 0提问于2012-10-07得票数 0
我需要在div中对消息进行居中，就像父div有100%的宽度，并且水平地对消息进行居中是没有问题的。此外，如您所见，图标也是垂直居中的，但我不能垂直地将文本居中。到目前为止，我应用到该div的唯一css是
.content {
height: 100% ;
display: inline-block ;
}
对于为什么消息div在.container中向下移动的任何建议。这是正确的跨浏览器方法吗？
浏览 8提问于2013-09-20得票数 1
回答已采纳
我已经用tumblr建立了我的博客doopist.com。
我正在尝试将twitter关注按钮和Facebook点赞按钮与我的博客标题徽标图像排成一条线。目前，Twitter图标在顶部横幅的顶部对齐，而FB按钮更接近居中。我尝试将按钮垂直居中，类似于徽标居中的方式。
我不太了解CSS，我试着做一个垂直居中对齐的div风格，但这导致了tumblr图标的标志(随机帖子，档案等)跳到一个新的行，这不是我们想要的。
我很好奇是否有人有关于如何将Twitter和FB按钮垂直居中的建议。非常感谢您的时间和帮助。
浏览 0提问于2013-03-08得票数 1
4回答
css属性vertical-align: middle在本例中不起作用。
HTML：
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS：
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
浏览 2提问于2011-11-01得票数 48
回答已采纳
1回答
现在，文本似乎不是完全垂直居中的。似乎顶部填充比底部填充更多。
当然，CSS中没有填充。如何使其完全垂直对齐？
浏览 2提问于2010-03-27得票数 0
回答已采纳
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：
下面是我的HTML和CSS的jsfiddle：
我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶部)，并使logo图像在该div内居中，水平和垂直居中，就像现在一样？
浏览 2提问于2012-10-16得票数 1
回答已采纳
我创建了两个矩形div(需要保持60 of宽和150 of高)，其中包含文本。文本是垂直排列在矩形中的，所以我使用transform: rotate(-90deg)垂直对齐文本。
我想让文字垂直和居中。在垂直旋转文本之前，我使用display: table和vertical-align: middle方法对文本进行居中。当文本是水平的时，这是完美的。但是，在旋转内容后，文本不会保持居中。CSS仍然将文本居中，就好像它是水平的。
我尝试使用绝对/相对位置从顶部和左侧偏移文本，但是当我删除display: table和vertical-align: center属性时，文本就消失了。
对于如何在保
浏览 10提问于2016-03-30得票数 1
回答已采纳
在jsFiddle上查看我的代码：
HTML代码：
<div>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>
CSS代码：
div {
height: 118px;
line-height: 118px;
background: red;
}
img {
vertic
浏览 2提问于2012-02-16得票数 2
回答已采纳
1回答
垂直和水平对齐
、、、
我的问题如下：
我垂直居中了一个div。但是，我想将另一个div水平居中。问题是我没有设法使它水平居中。
(X)HTML：
<body>
<div id="strut"></div>
<div id="page">
<div id="inner_page">
<h1>Galidie "jQzz" Clément</h1>
</div>
</div>
CSS：
html, body {
m
浏览 3提问于2012-10-20得票数 2
回答已采纳
1回答
我一直在努力寻找这个问题的答案，但我所找到的只是讨论将元素垂直居中的问题。
我想要做的是将div垂直居中，我知道如何使用css。问题是，如果高度太小，它仍然会居中并切断顶部和底部。
下面是我的意思的一个演示：
全屏演示：
你能告诉我如果高度太小该怎么对齐吗？最好不要JS。
谢谢,
马库斯
浏览 3提问于2012-04-21得票数 0
回答已采纳
3回答
什么是td的默认css，使其能够自动垂直地居中？
我知道如何使事物水平地居中，因为div比它的父margin: 0 auto小，但是什么允许td自动垂直地居中呢？
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered
浏览 3提问于2017-04-11得票数 0
回答已采纳
2回答
假设我有一行全部大写的文本(例如text-transform: uppercase)。我想让这个文本在div中垂直居中。我不需要担心多行文本。
有几种方法可以在CSS中垂直居中(例如，check out)。不幸的是，所有这些方法都考虑到了，并且我的文本没有任何下行体，所以它不能完美地居中。基本上，我希望将文本的一部分从基线居中到大写高度。
有没有办法使一行大写文本垂直居中？现在我正在使用position: relative并手动调整它，直到它居中(例如使用top: 2px)，但这显然不是一个健壮的解决方案(它非常依赖于浏览器呈现文本的方式，可用的字体等)。谢谢!
浏览 4提问于2013-04-29得票数 6
回答已采纳
在阅读了这个之后，我想：
为什么在CSS3中没有一种单一的垂直对中方式？
为什么我不能用CSS属性做一个<div>，并使我的内容垂直居中呢？
浏览 2提问于2012-09-25得票数 2
回答已采纳
1回答
我正在尝试垂直对齐我的登录屏幕。，并使用css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
我不会让我的项目垂直居中。我将无法实现它，因为我使用bootstrap类来水平居中。
浏览 0提问于2016-04-11得票数 7
回答已采纳
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
回答已采纳
我的HTML中有一个div，如下所示：
<div id="audio"><span>فایل های صوتی</span></div>
这两个元素的CSS如下所示：
#audio{
width: 100%;
height: 11%;
background-color: #3F1954;
}
span{
font-size: 20px;
color: white;
text-align: center;
font-family: btitr;
}
我希望跨度在div中居中(水平和垂直)，当我放大或缩小我的页面时，它
浏览 2提问于2014-10-02得票数 2
3回答
我需要在具有下一个属性的HTML容器中垂直对内容进行居中：
height: auto;
min-height: 50%;
我尝试了不同的对齐技术，但没有成功。例如：
表：
鬼元素：
您能建议如何在这样的容器中垂直地居中内容吗？我对纯HTML/CSS解决方案感兴趣。
浏览 7提问于2014-08-25得票数 1
我已经开发了一个1366x768宽高比为16:9的应用程序，但在4:3比例的ipad中，该应用程序不能完全显示为窗口大小。底部有一些空间。我们不能适合窗口，因为它会看起来很奇怪。 如何使画布垂直居中，比例为4:3而不是顶部。我尝试使用css在jquery中垂直居中。 function sizeHandler()
{
window.scrollTo(0, 1);
if (!$("#canvas"))
{ return; }
var rw = CANVAS_WIDTH;
var rh = CANVAS_HEIGHT;
va
浏览 16提问于2019-04-24得票数 0
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
3回答
我在div中有一个div和一个图像。图像大小会有所不同。
我想让它在水平和垂直方向居中。Css垂直对齐似乎不起作用。
有什么窍门吗？我可以使用php、css或Jquery。
浏览 2提问于2009-10-20得票数 3
回答已采纳
我设法使用了另一个用户的指令，并将文本垂直居中，但它不允许我将整个东西垂直居中。我想如果我把文本放在它自己的div中，它可以做到这一点，但它没有。我如何在箭头旁边的段落居中？
垂直对齐CSS非常令人困惑……
CSS
#arrow {
width:33px;
height:25px;
background-image:url('http://i.imgur.com/26tbf.png');
margin-left:55px;
background-position:0 50%;
float:le
浏览 0提问于2012-08-04得票数 0
回答已采纳
6回答
我有这个简单的HTML代码，但是让我感到沮丧，因为它不能垂直地居中：
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
这是我的CSS：
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
.inner div实际
浏览 6提问于2015-02-05得票数 1
回答已采纳
6回答
我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。
有人能建议我怎么才能得
浏览 0提问于2012-03-09得票数 38
回答已采纳
我有一个jQuery脚本，在div中垂直和水平居中放置图像。这对于加载到Pikachoose滑块中的第一个图像非常有效，但是当Pikachoose更改幻灯片时，我需要脚本重新初始化-使下一个图像垂直和水平居中。
以下是在图像上工作的垂直/中心脚本：
$(window).load(function(){
var $img = $('img.galleryfull');
var h = $img.height();
$img.css('margin-top', +h / -2 + "px");
var w = $img
浏览 1提问于2013-06-17得票数 1
回答已采纳
我有一个带Bootstrap的面板脚注。我使用css中的text-align属性将文本放在其中居中，还将其垂直居中(总是在css中)。下面是css代码：
.panel-footer{
padding: 0 15px;
height: 80px;
line-height: 80px;
text-align: center;
color: #777;
border: 1px solid;
border-color: #e7e7e7;
background-color: #FFFFFF;
}
这是html页面：
<div class="panel-fo
浏览 12提问于2017-07-14得票数 1
回答已采纳
3回答
我正在尝试将一些文本放在按钮图像上。我设法在按钮上从左到右将其居中对齐，但垂直对齐对其余部分不起作用。在CSS中有没有一种方法可以使文本垂直居中。
.selectedTabOnPlacementMenu
{
background: url('/Content/Images/Blank_Yellow.png') no-repeat;
width:88px;
height:28px;
text-align:center;
font-weight:bold;
}
浏览 0提问于2009-06-18得票数 1
回答已采纳
2回答
带纵横比的中心分割
、、、
我需要在html视图中居中放置一个Div。它应该在垂直和水平方向上都居中。但Div应该保持其宽高比(4/3)，并且最小边距为10px。
我做了一个Javascript：
function resizeWindow() {
var wHeight = $(document).height() - 20;
var wWidth = $(document).width() - 20;
var gameStage = $("#gameStage");
if ((wWidth / 4) * 3 <= wHeight) {
gameStage.css("width
浏览 0提问于2015-08-26得票数 3
我被一个我正在工作的网站的css布局卡住了。这是一个报告工具，将在宽屏显示器和上网本上使用。网站已经完成了，除了一个样式表，它可以很好地从(非常)宽屏幕格式降级为窄(上网本)格式。
下面是它在宽屏幕上的显示方式：
对于窄屏幕：
我希望它在狭窄的图片中降级为右边的，但我认为左边的会更可行。
我知道我可以根据屏幕大小进行条件css加载，但我希望它只是一个样式表。问题的核心是，我希望右侧(图形)内容是垂直的，当页面较宽时居中，但当没有空间显示时，居中并在表格的上方/下方水平。垂直滚动是可以的。带有红色边的桌子是动态高度的，这也是一个问题。
我有一个布局，使正确的图形数据居中描述，但不知道如何迫使它从
浏览 0提问于2011-06-28得票数 3
回答已采纳
6回答
嗨，我想这应该很简单，但我不能让它工作。似乎无论我做什么，我都不能让文本组件在视图中水平居中。我已经尝试使用alignItems:center，justifyContent:center，alignSelf:center，textAlign:center...毫无办法。我可以让它垂直居中，但不能水平居中。亲爱的主啊，为什么？
<Animated.View style={[styles.titleContainer]}>
<Text style={styles.title}>App logo here</Text>
</Animated.View
浏览 3提问于2015-11-03得票数 5
我有一个网上相册。缩略图页面是一个150px x 150px div的网格，缩略图图像设置在其中。
由于缩略图是矩形的，理想的做法是在div中自动居中。
读到这里，我想出了如何使它们水平居中。我还读到，在CSS3起飞之前，自动垂直居中是不可能的。这是真的吗？
我已经得到了水平图像自动居中，这是：
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
但是，垂直居中不起作用：
.landscape_t {
width: 150px;
height
浏览 1提问于2012-06-15得票数 0
回答已采纳
3回答
我知道在CSS中垂直居中一开始是一件痛苦的事情，但我只是让它变得更复杂了一点。在我的页面上，我有：
<ul id="complete">
</ul>
<form id="new_item_form">
<input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>
<ul id="incomplete">
</ul>
浏览 0提问于2012-10-12得票数 1
回答已采纳
2回答
我想使用bootstrap css框架的内联标签：
<span class="label">Default</span>
不幸的是，当与其他元素一起使用时，这些标签不会垂直居中。
<p>
<span class="label"><a href="#">test</a></span>This is a test heading.
</p>
请查看完整的代码以获取可视化示例：
我知道行高和绝对/相对定位的变通方法，但不能正确地应用它们。
如何将这些标签
浏览 1提问于2012-02-17得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
