如何在另一个<div>中间垂直对齐<div>？
在另一个<div>中间垂直对齐<div>可以通过以下步骤实现：
- 首先，确保父级容器的样式设置为相对定位（position: relative），这将为子级元素提供定位的参考点。
- 接下来，将要垂直对齐的<div>元素设置为绝对定位（position: absolute）。
- 使用top和bottom属性将<div>元素的上下边距设置为相等的值，以使其垂直居中。
- 最后，使用transform属性的translateY函数将<div>元素向上移动50%的高度，以实现垂直居中。
以下是一个示例代码：
HTML代码：
<div class="parent">
<div class="child">垂直居中</div>
</div>CSS代码：
.parent {
position: relative;
height: 200px; /* 父级容器的高度 */
background-color: #f2f2f2;
}
.child {
position: absolute;
top: 50%;
bottom: 50%;
transform: translateY(-50%);
background-color: #ccc;
padding: 10px;
}在这个示例中，父级容器的高度为200px，子级<div>元素将在其中垂直居中显示。您可以根据需要调整父级容器和子级元素的样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
- 腾讯云负载均衡（CLB）：https://cloud.tencent.com/product/clb
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网通信（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
请注意，以上链接仅为示例，您可以根据实际需求选择适合的腾讯云产品。
相关·内容
2回答
水平对齐另一个div元素中的div元素可以使用margin: 0 auto;实现，只要它们都具有auto以外的宽度属性，但这不适用于垂直对齐。
如何在另一个div中垂直对齐div?
浏览 5提问于2012-07-04得票数 0
回答已采纳
2回答
当我删除div.content:before选择器中的垂直对齐时，文本会下拉，不能完全显示，那么伪类是做什么的，为什么这样做呢？PS:是否有其他方式来实现像演示显示，即对齐的文本在中间和文字将开始在一个新的行，如果它太长。
下面是演示：
html：
<div class="wrapper">
<div class="content">
<span>Mix Color Lace Dress</span>
</div>
</div>
css
浏览 4提问于2014-01-28得票数 0
回答已采纳
我有两个div，我想在另一个div中垂直居中。目前我有：
现在我明白这里是怎么回事了，但是我想让左边的div在容器中垂直对齐，右边的div也一样。但它们是成对垂直排列的，而不是单独的。我尝试了各种方法，但似乎都不能让它工作。
浏览 0提问于2011-04-14得票数 13
回答已采纳
2回答
我想更深入地了解直线高度是如何工作的，特别是在固定高度元素中垂直对齐文本。在下面的示例链接中，您可以看到，将行高设置为等于容器的高度将对项目进行居中，只要项目都是相同大小的。当你放置两种不同大小的跨度，那么较大的一个将是居中的，而另一个则不会。我无法解释这一点，因为大元素和小元素都是分开工作的。如何实现大跨度和小跨度的中心(使用线的高度)？(为什么这种行为首先会发生？)
.header {
background: grey;
width: 100%;
height: 65px;
}
.big, .small {
line-height: 65px;
}
.b
浏览 2提问于2015-05-27得票数 0
回答已采纳
2回答
我需要帮助居中的链接在一个div。水平和垂直对齐，我不知道它是如何工作的我测试了多种可能性，但我失败了。
.Menu {
height:81px;
left : 0px;
right : 0px;
border:1px solid #727272;
border-radius:9px;
-webkit-border-radius:9px;
box-shadow: 1px 1px 6px #333;
background-color: #FFFFFF;
margin:5%;
vertical-align:middle;
padding-left : 25%;
}
.Picto
浏览 1提问于2015-03-11得票数 0
2回答
我的问题是我想要一组并排的div。这些div可以增长到任意高度，因此垂直对齐很重要。正如另一篇文章所建议的那样，为了解决垂直对齐问题，我有一个类似于此的结构。请帮我填空。
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
浏览 0提问于2014-07-13得票数 0
1回答
流体导航杆图像的垂直对中
、、、
我正试图得到一个流畅的导航栏完成在Dreamweaver，这也将改变徽标的大小时，改变视口。这是工作和外观完美，但标志图像将不会保持垂直中心时，它变得更小。
<div class="gridContainer clearfix"> <div id="div1" class="fluid">
<div id="divL" class="fluid"><img src="images/logo.png" alt=""/><
浏览 3提问于2015-03-14得票数 1
回答已采纳
2回答
如何对齐旋转svg图像的中间线(垂直)？
您可以在下面看到，小旋转图像不完全对齐在中间。它更像是线的左上角。我很感激任何关于如何使它在垂直线中间完美地对齐的指南。
浏览 0提问于2018-05-23得票数 2
回答已采纳
1回答
我有以下(示例) html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TH-Alignment</title>
<style type="text/css">
th {
浏览 0提问于2012-06-04得票数 4
2回答
我在div中有一个单列顺序的按钮。按钮数是可变的。我想垂直对齐按钮。“垂直对齐:中间”不起作用。我该怎么做呢？
Div高度是固定的。如何垂直对齐这些按钮？
浏览 1提问于2011-07-12得票数 0
2回答
我有一个按钮，旁边有一些文字，像这样，
----------------
| |
| Button | Text
| |
----------------
我希望文本垂直对齐到中心的按钮。我应该如何在CSS中做到这一点？
以下是我的尝试：
我发现这种方法有两个问题：
文本显示在IE 6的顶部。两个元素从父div中流出，因此这个布局将干扰其他div.。
浏览 6提问于2010-12-10得票数 4
<div class="bordered" style="height: 300px; text-align: center">
<div class="bordered inline-blocked" style="height: 100px; vertical-align: middle">XXX</div>
<div class="bordered inline-blocked" style="height: 200px;
浏览 4提问于2012-07-13得票数 2
2回答
我有两个硬币
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 45%; height: 500px;
margin-right:2.5%;
margin-top: 30px;
background-color: red;
display: inline-block;
}
#div2 {
width: 45%; height: 300px;
margin-right:
浏览 0提问于2015-05-03得票数 1
回答已采纳
2回答
为什么我的div <div class="two">在我输入vertical-align: middle;后在中间事件中垂直对齐？
这是一个
HTML：
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
CSS：
.main {
border: 1px solid;
display: inline-block;
}
浏览 1提问于2014-05-27得票数 0
回答已采纳
4回答
为什么这个不起作用(即div内容不是垂直居中的)：
<div style="display: table;">
<div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;">
<a target="_self" runat="server" href="~/daily.aspx">
<img src="image
浏览 4提问于2011-10-27得票数 1
回答已采纳
4回答
我来自世界各地，我一直在看google上的资源，关于做多个包装器来垂直对齐内容--然而它看起来真的很丑陋。
现在有没有更简单的使用HTML5的方法？是否有某种实现使用类似HBox/VBox的思路？我看到有一些非ie浏览器的例子--有兼容的方式吗？
现在任何一个头脑正常的人是怎么做HTML的？真是一团糟！
/编辑
我终于想出了如何在屏幕上垂直对齐整个框，如何使列表项垂直居中。
我尝试了两种方法来对齐此html：
<nav>
<ul>
<li><a href="#!/home">Home</a>&l
浏览 1提问于2010-08-26得票数 10
回答已采纳
1回答
在下面的代码中，我如何用"ExclamationPoint“类做垂直的中心元素跨度？我想把它设计成如下图片：
我尝试了填充-顶部和垂直；对齐，但我不能风格像图像
我想放置跨度与类"ExclamationPoint“垂直居中，而不管侧面DIV的高度。
浏览 1提问于2011-08-28得票数 0
回答已采纳
1回答
在我的情况下，我试图做一个垂直的中间对齐。
我有过。
<section id='container'>
<div id='title'>
<h1>Title here.</h1>
</div>
</section>
我的css就像
#title{
display: inline-block;
width: 235px;
height: 94px;
position: relative;
text-align: center;
}
#left-lesso
浏览 0提问于2013-12-13得票数 0
回答已采纳
什么是最好的方式来垂直和水平对齐内容DIV图像上的回应。我可以给位置绝对和对齐top:some%，和left:some%，但它不会对齐中间的图像容器在某些屏幕上，我可以给margin-top:-%，margin-left:some%这个也不会正确对齐有时意味着在不同的screens.Is有任何其他方法做it.The内容div应该准确地放置在图像的中间(水平和垂直在所有屏幕上)。做这件事最好的方法是什么？
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="img/some
浏览 2提问于2015-02-23得票数 0
我有一个php脚本，它在另一个div中生成数量不定的div，但默认情况下，div是垂直对齐的，就像在另一个的顶部一样，尽管它们的宽度可以允许它们水平对齐。我该怎么做呢？
浏览 1提问于2011-03-31得票数 0
回答已采纳
我有一个蓝色的盒子在一页，是100 px从顶部和左边。然后我希望蓝色框中的文本垂直对齐。为什么我下面的代码不能垂直对齐文本？
<!DOCTYPE html>
<html>
<body>
<div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
浏览 3提问于2012-12-14得票数 5
回答已采纳
1回答
我正在做一些高级图表，我用40×40的图片作为传奇标签。然而，图例符号是垂直顶对齐的.()
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
labelFormatter: function () {
return $('<div>').append($('<img>').attr('src', 'http://doc.jsfid
浏览 4提问于2014-03-18得票数 0
回答已采纳
4回答
垂直对齐包装器
、、、
我无聊地摆弄着一个网站，试图弄清楚如何垂直对齐我的包裹，而我在这方面失败了。我已经水平对齐了，只需要帮助垂直对齐即可。(是的，我已经尝试过竖直对齐:中间，但它不起作用)。
* { margin:0; padding:0; }
html { height:100%; }
body { background:/*url(images/bg.jpg)*/#14181a; }
#wrap { width:960px; height:55%; margin:0 auto; background:#293033; }
<div id="wra
浏览 1提问于2012-04-21得票数 2
如果您看到此页，文本是对齐左边，但我也希望他们对齐中心垂直。类似于excel中的中间对齐+左对齐。
你可以看到这张照片来看看我在找什么
📷
浏览 0提问于2019-02-15得票数 0
回答已采纳
我需要在一个容器DIV中有三个DIV，它们都水平居中。第一个需要与容器的垂直顶部对齐，第二个需要与垂直中心对齐，第三个需要与垂直底部对齐。这是垂直放置div的，但不涉及其他项。另一个答案是，但是如何添加需要垂直对齐顶部和底部的DIVs呢？
下面是HTML：
<div class="carousel-caption"> <!-- outer container; all items horizontally centered -->
<div class="row align-top"> <!-- align th
浏览 1提问于2015-03-25得票数 7
回答已采纳
5回答
我正在尝试垂直对齐我的div中的一些元素，但由于某种原因它不起作用
我有一件事
html
<div class="test">
<a href="#"><img src="test.png"/></a>
<a href="#">Text here...</a>
</div>
<div class="test">
<a href="#"><img src="
浏览 6提问于2015-04-21得票数 0
回答已采纳
2回答
基础-垂直对中
、、
我使用的是基金会v6.2.1，我试图将h3元素垂直对齐到中间，但我没有放弃。我该怎么做呢？
<div class='large-12 columns most-read'>
<div class='large-1 columns align-self-middle'>
<h3> {{ orderNumber }}</h3>
</div>
<div class='large-10 columns'>
<p>{{ Article title
浏览 1提问于2016-05-26得票数 1
回答已采纳
3回答
我试图实现一个特定的流体布局，每个DIVs的内容都是垂直和水平的中心。但是，我的中间行(A、B、C)一直存在垂直和/或水平对齐的问题。
目标是让它像这样工作：
注意:如果有一种方法，我可以选择设置移动布局的"C“区域流体(而不必更改，这样我就可以测试哪个选项工作得最好)，这将是一个额外的好处！
下面是HTML的一个片段：
<div class="page">
<div class="col col-top">top</div>
<div class="col col-mi
浏览 1提问于2015-11-23得票数 0
回答已采纳
2回答
我在div中阅读了许多关于内容垂直对齐的答案，并试图实现我看到的主要答案：
.middle-col{
vertical-align: middle;
display: table-cell;
}
但不起作用。
见。
因为它是基于引导构建的，所以您需要展开HTML的结果以查看div
我试图实现的是-垂直对齐中间列的内容。
浏览 5提问于2013-09-22得票数 0
回答已采纳
1回答
所以我试图让一个图片文件在我的移动Wordpress主题中的div中间垂直对齐，文本在右手边。不幸的是，在图像上使用“垂直对齐:中间”会导致以下结果：
这是我的CSS：
<div <?php post_class('post clearfix'); ?> id="post-<?php the_ID(); ?>">
<div style="vertical-align:middle"><?php if (class_exists('MultiPostTh
浏览 1提问于2012-10-15得票数 0
3回答
我有一个设置了维度的背景div，其中包括一个table元素。
我正在寻找一种方法来将表定位在div的左中角。左边很容易，中间我不能去上班。这就是我所拥有的：
HTML
<div id="background">
<table>
//... stuff
</table>
</div>
CSS：
#background {
height: 1000px;
width: 1000px;
text-align: left;
}
谁能告诉我怎么把
浏览 0提问于2012-03-07得票数 1
回答已采纳
2回答
响应设计图像对齐
、、
我是一个新手html/CSS程序员，需要满足一个非常具体的情况。我有两个图像，两者必须垂直对齐的中心图像。一个图像必须左对齐，另一个图像必须对齐。他们将在一个最大的宽度div，但我不认为这应该是一个问题。当网页缩小到两幅图片的宽度以下时，图像就需要水平地以一个图像为中心，另一个图像的顶部为另一个图像。我已经把图片添加到clarfiy (对不起，我本来是作为图片添加的，但我的代表为零)。div容器和图像都是可变的，因此基于像素的定位是不可能的。
所以我对此进行了大量的研究，但我发现的所有答案都是片面的，无法完成我正在寻找的所有事情。有什么想法吗？
()
()
研究：
我注意到我的问题是-1。我想
浏览 0提问于2013-09-04得票数 0
回答已采纳
嘿，伙计们，我只是在玩一些CSS，我刚开始接触CSS，我做了以下简单的演示：
HTML :：
<label for="test">Name</label>
<input type="text" id="test">
CSS :：
input {
height: 70px;
border-radius: 5px;
display: inline-block;
浏览 3提问于2015-05-26得票数 0
回答已采纳
7回答
我已经试过了所有我能找到的方法。对我没什么用..。我只想知道在另一个div中对齐div (或块元素)的问题是什么。什么事会这么难..。
我想垂直对齐绿色块。
这是小提琴：
<div class="rtl centerwrapper">
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="green-block
浏览 6提问于2014-03-24得票数 1
回答已采纳
我有一个div，我想在div的右下角放一个图像，在左下角放一些图像。它们是不同的高度，所以我想确保它们都对齐到div的底部。
首先，我使用以下方法使右下角对齐：
position: absolute:
bottom: 0;
right: 0;
但是，我无法在它周围留出一个空白处(因为它在文档流之外)。因此，基于下面的一些答案，我试图创建上面的jsfiddle，让它在没有任何位置的情况下工作:绝对。
下面是我的jsFiddle示例：。
我现在唯一的问题是，我希望左边的图像对齐到div的底部(相对于对齐到右边图像的顶部)。在某些情况下，我在左下角没有任何图像，但我希望具有相同的垂
浏览 6提问于2014-04-05得票数 0
回答已采纳
我能够垂直对齐在span(这是在div内)，但我需要我的页面独立于屏幕分辨率。已使用线高度功能，以遏制我的文本从div当我改变resolution..but时，我看到它没有垂直对齐为中间的所有分辨率。我应该研究css中的哪些特性？
<div>
<span style="width:49%; height:50%; top:25%; left:0%; line-height:50%;font-size:x-small;font-family:Verdana;font-weight:bold; position:absolute; display:block;"
浏览 2提问于2014-08-23得票数 0
回答已采纳
3回答
我有两个inline-block div在彼此旁边。左边的是可变高度的，右边的只有一个按钮。
我希望右边的div总是与左div垂直中心。
下面是它的外观：
有没有人知道是否可以将它们保持为inline-block，并保持相对于另一个div的垂直中心？
#container {
width: 500px;
height: 300px;
border: 1px solid grey;
}
.inlineDiv {
display: inline-block;
}
#inlineDiv1 {
border: 1px solid blue;
}
#inlineDiv2 {
浏览 1提问于2017-07-27得票数 0
回答已采纳
4回答
你到底是怎么垂直地把一个div中心的？
水平已经有足够的方法，但是无论我尝试什么，垂直对中都是不可能的。
体{垂直对齐:中间；}
一事无成
正文{文本对齐:中间；}
一事无成
div.middle {顶: 50%;}
一事无成
有可能吗？
我想我要哭了。
浏览 0提问于2009-12-13得票数 0
回答已采纳
我在一台div里面有3跨。Chrome显示了中心垂直排列的所有三个跨度，如下所示：
但这就是Firefox中所发生的事情：
下面是div的代码，其中包含以下内容: quantity label、- button、text字段&+按钮：
<div class="form-item form-type-textfield form-item-quantity">
<label for="edit-quantity">Quantity </label>
<span class=
浏览 4提问于2015-06-20得票数 1
回答已采纳
2回答
我有div箭头按钮在每一侧的图像滑块，我想要垂直对齐，两者都对齐到它们各自的div侧，左箭头对齐到它的div的左边，右箭头对齐到它的div的右边。我的问题是，当我使用float:right和line-height时，箭头图像可以正确地垂直对齐，但按钮没有垂直对齐。
这是我的html：
<div class="row">
<div class="large-1 columns arrow">
<div class="button tertiary previous">
浏览 2提问于2016-10-24得票数 0
1回答
跨平台垂直对齐节中的内容
、、、
我正在尝试垂直对齐(居中)我在一个部分的所有内容。我目前的CSS只适用于Firefox和Chrome。它在Safari或IE上不起作用。
你能建议我如何将下面的东西垂直对齐，以便在Safari和IE (8+)之间也能工作吗？
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
section {
min-height: 100%;
width: 100%;
overflow: hidden;
display: f
浏览 0提问于2015-08-07得票数 0
为什么垂直对齐在我试图对齐的元素上不起作用？但如果我对齐了它周围的其他元素就行了？
我读过很少关于垂直对齐的文章，这些文章指出它是为对齐表或内联元素而创建的。因此，我在代码中将所有元素设置为内联块。
当我尝试垂直对齐菜单链接时，它几乎什么也不做.如果我试图使1框与菜单链接的左边或右边对齐，它将按下菜单。
但是如果我同时垂直对齐两个框，文本就会对齐。
这是怎么回事，我应该如何使用垂直对齐，或者我应该不再使用它了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="
浏览 1提问于2019-03-22得票数 0
回答已采纳
1回答
我正在寻找一种方法来垂直对齐一个块元素到一个图像。在我的网站上，这个图像会动态地改变高度和宽度，所以我需要垂直对齐来适应图像的大小。例如：
<img src="photo.jpg" alt="test" />
<div id="box">
</div>
img { float: left; }
#box { float: right; width: 200px; height: 150px; background-color: #666; }
所以我想让这个div垂直对齐图像。如何做到这一点？谢谢。
浏览 1提问于2012-01-31得票数 0
2回答
我被卡住了好几个小时，只是为了在v-card中垂直和水平对齐一件物品。下面的图片是我目前所拥有的，我只需要垂直对齐项目，但我不知道如何。有谁可以帮我？提前感谢 ? 我的代码： <div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px'
浏览 31提问于2020-07-20得票数 2
回答已采纳
1回答
我有两个div(在一个包装中)，我使用它来显示一张照片和照片的标题并排和垂直对齐为中间。
我现在面临的问题是，当我试图将照片向右浮动并将标题向左浮动时，标题和照片不再垂直排列为中间。
似乎当我使用浮子时，垂直对齐就变成了顶部.
，我如何添加浮标，并保持垂直对齐为中间？，我花了2个小时来尝试我所知道的一切。我希望有人能指出我做错了什么。
这是我的代码：
<div class="live_preview_top_header_wrapper">
<div class="live_preview_top_header_title">T
浏览 7提问于2015-04-29得票数 0
回答已采纳
2回答
我在CSS中的内容定位有问题。我想把我的内容和垂直定位。我试过使用柔性箱，但没有用。我知道什么是柔性盒，它的特性，但它对我不起作用。这是CSS和HTML代码。
HTML：
<div class="main-div">
<div class="container-1">
<h2>What is Your Age In Days?</h2>
<div class="flex-box-container-1">
<
浏览 4提问于2021-12-12得票数 0
我想垂直居中两个div在我的网站的标题。代码如下：
<header>
<div class="block">
<div class="left">
<ul>
<li>Home page link</li>
<li>Music page link</li>
浏览 0提问于2013-07-15得票数 0
回答已采纳
6回答
我在一个div里面有一个图像，我想把图像垂直地和水平地对齐，尝试不同的方法，比如使容器显示为表，图像作为表行等等。
这不是垂直对齐。
这是我的代码：
<div class="container">
<img src='images/img1.jpg' class="imgclass">
</div>
CSS：
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative
浏览 3提问于2014-05-22得票数 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
回答已采纳
1回答
我有一个固定维数的div和一个无序的列表。列表的项是水平放置在另一个旁边的。我试图做的是一个滑块，显示一个又一个列表元素。我不能做的是将列表和元素垂直地放在div内，因为我不知道列表的高度。
这是我的密码：
HTML
<div id="container">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
CSS
#container {
wi
浏览 3提问于2013-04-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
