怎么垂直的调整因素中的一个div?
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一个div与两个图像和一个 h1.所有他们需要的是垂直排在div，彼此相邻。
其中一个图像需要 absolute 定位在div。
什么是CSS需要对这一工作在所有通用浏览器？
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
解决方案
哇，这个问题是受欢迎的。这是基于一种误解的 vertical-align 财产。这个优秀的文解释：
理解 vertical-align, 或"如何(不)垂直的中心内容" 通过加文Kistner.
"如何中心在CSS" 是一个巨大的网络工具，它有助于找到必要的CSS中心属于不同的情况。
简而言之 (和链接，以防止腐烂):
- 内联要素 (及 只 内联件)可以是垂直排在他们的背景下通过
vertical-align: middle.但是，"context"不是整个父容器的高度，这是高度文本行他们。 jsfiddle例 - 对于框元，垂直排是更加困难，并强烈依赖于特定情况：
其他提示
现在，弹性盒支持正在增加，这CSS应用于含有元素将垂直的中心所包含的项目：
.container {
display: flex;
align-items: center;
}
使用的前缀的版本，如果你还需要资源管理器的目标10和老(< 4.4)安卓浏览器：
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
我用这个非常简单的代码:
HTML：
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
显然，无论使用 .class 或 #id, ，结果不会改变。
它的工作对我说：
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
一种技术从一个朋友的地雷：
HTML：
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
演示 在这里，
所有他们需要的是垂直排在div
对准 如何?上衣的图像对准文本的顶部?
其中一个图像的需要是绝对的定位在div。
绝对位于相对于DIV?也许你可以勾画出你在找什么...?
fd已经描述 步骤绝对的定位，以及调整显示的 H1 元件这样的图像将会出现内联。对，我将增加，你可以调整的图像的使用 vertical-align 风格：
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...这会把头和图像在一起，与顶级的边缘对齐。其他准的选择存在； 请参阅文件.你可能还会发现其有利于降DIV和移动图像的内部 H1 元素-这提供了语义价值到容器中，并删除需要调整显示的 H1:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
要位置的框件中心(工作在IE9及以上)，需要一个包装 div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
使用这一公式，它将工作始终没有裂缝：
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>几乎所有的方法需要的指定高度，但是，我们常常没有任何的高度。
因此，这里是一个CSS3 3线的伎俩，不需要知道的高度。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
它支持甚至在IE9。
与其供应商的前缀：
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
资料来源： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
我键是要把内部的表1列和1列，100％的宽度和高度，垂直对齐：中间。
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
通过默认h1是一块元，并将呈现上线之后的第一img，以及将导致第二img出现在该线以下的方框。
停止出现这种情况可以设置h1有内联流行为：
#header > h1 { display: inline; }
作为绝对的定位img 内部div, 你需要设置包含div有一个"知名的大小"在此之前，将正常工作。以我的经验，还需要改变位置的属性离默认的位置：相对的工作对我来说：
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果你能得到那工作时，你可能想试试逐步消除高度、宽度、位置的属性，从div。头得到最少的必要性得到你想要的效果。
更新：
这里是一个完整的示例中，工作上的火狐3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
使用CSS到垂直的中心，可以让外容器的行为就像一个表，内容作为一个表单元。在这种格式对象将留中心。:)
我嵌套的多个对象JSFiddle为一个例子，但核心思想是这样的：
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* act as a table so we can center vertically its child */
display: table;
/* set dimensions */
height: 200px;
width: 200px;
/* horizontal center text */
text-align: center;
/* create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* act as a table cell */
display: table-cell;
/* and now we can vertically center! */
vertical-align: middle;
/* some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
多对象，例如：
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
结果，
我们可以使用一个集群功能的计算，以计算元件的大小和位置的儿童元。
例HTML：
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
和CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
演示的创建： https://jsfiddle.net/xnjq1t22/
这个解决方案的工作以及与敏感 div height 和 width 为好。
注：计算功能不是测试的兼容性与老浏览器。
按今天，我们发现一个新的解决方法垂直致的多个文本的行div使用CSS3(并且我也使用引导v3网系统的美化UI)，如下：
.immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
按我的理解，即父母的文本包含的元素，必须有一些高度。我希望它会帮助你。谢谢！
有两种方法可以调整要素的垂直和水平
1.引导4.3.X
对垂直排: d-flex align-items-center
水平一致性： d-flex justify-content-center
.container {
height: 180px;
width:100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>2.CSS3
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}<div class="container">
<div class="child">I am in Center</div>
</div>只是用一单元格表内div!只是设定该单元和表格的高度和与到100%，并可以使用的垂直排列。
一个细胞表内div处理纵向排列并向后兼容回到石器时代！
我一直在使用以下解决方案(没有定位和无线的高度)，因为超过一年，它的工作与即7和8。
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
这是我个人的解决方案的一个我素的内部div
HTML
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
CSS
.circle {
border-radius: 50%;
color: blue;
background-color: red;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
.icon {
font-size: 50px;
vertical-align: middle;
}
对我，它的工作这样的：
<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
<a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>
"A"的元素转变为一个按钮，使用引导课程，并且它现在是垂直地为中心内外"div".
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
就是这样：
<div>
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
一个细胞表内div处理纵向排列并向后兼容回到石器时代！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
这里是另一个(应)方法：
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
我一个.净的家伙是谁刚进入网络方案编制。我没有用CSS(嗯，一点点的位)。我用了一个小JavaScript完成垂直居中沿字。css功能。
我刚刚发布的一切从我的测试。它可能不太优雅，但它的工作原理为止。
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
</script>
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
不隶属于 StackOverflow
