将两个div并排垂直居中对齐
可以通过以下步骤实现：
- 创建一个父容器，设置其为flex布局，并使用justify-content和align-items属性将子元素垂直居中对齐。例如：
.parent-container {
display: flex;
justify-content: center;
align-items: center;
}- 在父容器中创建两个子div元素，并设置宽度、高度、背景色等样式。例如：
<div class="parent-container">
<div class="child-div"></div>
<div class="child-div"></div>
</div>.child-div {
width: 200px;
height: 200px;
background-color: #ccc;
}这样，两个子div元素将会并排显示，并且垂直居中对齐。
对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体品牌商，无法给出具体的链接地址。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
1回答
我尝试根据浏览器的视图高度垂直居中对齐两个div。我也想把这些div放在一起。 <div class="frame-work"> <!--left div-->
浏览 26提问于2018-01-12得票数 0
回答已采纳
1回答
我有一个带锚的div，我希望这个锚能占据div的全部宽度，但是我想让锚的文本在div中居中，它不适合我。display: inline-block; width: 100%;} <div class="action-left action">
<a hr
浏览 2提问于2020-10-22得票数 0
回答已采纳
1回答
我的目标是有两个列#1，并排，在页面的中心。当窗口宽度减小并且两列不再并排宽时，它们都应该是#2，居中在页面的中心，一个在另一个的下方。我通过将两列都放在一个最大宽度的包装器中并将它们左右浮动来完成#1。但是，当包装器宽度减小时，列将左右对齐，而不是页面的中心。
浏览 2提问于2011-08-11得票数 1
回答已采纳
这只是DIV内容中的相关部分： https://jsfiddle.net/5zyhortk/ 我想做的是在文本旁边显示照片，就像这样(图片来自PDF)： ? 有问题的代码是： <article class="col-lg-3"><img src="https://upload.wikimedia.org/wikipedia/thumb/1/1
浏览 16提问于2021-11-05得票数 1
2回答
我想在div容器内将两个图像并排垂直和水平地居中。> <img class="u-max-full-width" src="img1.jpg"> <i
浏览 5提问于2016-09-14得票数 1
回答已采纳
我有两个相同高度的div，彼此并排垂直对齐。作为它们之间的视觉分隔符，我想要有一个3px宽的矩形条，它几乎是div的高度，垂直居中，浮动，这样就有大约10px的顶部和底部没有被分隔线覆盖。我也想对水平div做类似的事情。
我想要做什么的一个快速photoshop模型(蓝色轮廓大约是div的位置，蓝色文本是div的描述)灰线是我想要的3个div的分隔线：
浏览 3提问于2012-10-06得票数 0
回答已采纳
我正在寻找一种干净的方式来显示底部对齐的垂直颜色条。当前的实现使用font-size调整高度，这很粗糙&结果是垂直居中的条形图。HTML：{% for bar in bars %}{% endfor %}
<
浏览 11提问于2017-08-08得票数 2
回答已采纳
6回答
我已经将div中图像的边框设置为none。现在，我想要将该图像放在其包含的div中。我试过使用margin: 0 auto;，但不起作用。<body> <div id="banner">
<img src=&
浏览 2提问于2010-01-26得票数 13
回答已采纳
前两个元素应该左对齐，按钮应该右对齐。我尝试过pull-right类，但它破坏了按钮的垂直对齐方式。我想让它垂直居中。我尝试设置行高，但它破坏了标签的垂直对齐。(我也希望标签相对于输入垂直居中对齐) <div class="form-group co
浏览 17提问于2015-09-09得票数 3
我想垂直居中两个div在我的网站的标题。48px; letter-spacing: -4.5px;}
在垂直居中但是，这些示例只讨论了一个垂直居中的div。我希望两个div垂直居中，一个左对齐，另一个右对齐
浏览 0提问于2013-07-15得票数 0
回答已采纳
我想知道，我如何能采取两个观点，堆叠在一起(并在容器水平居中)，而在纵向和移动他们是并排在景观(和垂直中心在容器)。
我希望转盘在左边对齐，而报价框在右边对齐。在景观中，两种观点都应该占据全部高度。
浏览 5提问于2014-11-30得票数 1
回答已采纳
4回答
我有一个带有特定宽度的div标签，它将通过javascript接收文本。<div id="titleTop" style="width:400px; height:25px; padding-top:15px;"></div>编辑:为了清楚起见，
浏览 0提问于2012-11-30得票数 3
回答已采纳
我想知道如果可能的话，如何将“隐藏、数量、总数”信息块对齐到表格顶部，同时将两个计算信息块对齐到底部？如果可能的话，我不希望在代码中添加大量的div元素。
这是我所在位置的图形屏幕截图。
浏览 0提问于2013-09-11得票数 0
如何在屏幕大小改变时使两个div(带有img标记)并排而不垂直对齐 <div class="pageView"> </div>
浏览 7提问于2016-02-01得票数 1
回答已采纳
5回答
<div id="wrapper" style="height:400px;width:400px;"> Text</div>
我正在寻找一种方法
浏览 0提问于2011-10-03得票数 1
3回答
我需要创建布局(下面的布局图像链接)
顶部我想要的DIV框有在左边的文本字段和左边的图像。我想把边栏分成两部分，顶部和底部DIV框的高度应根据文本输入进行扩展，如果有更多的文本行(例如:在顶部的DIV框中)，则应向下按下两个并排的DIV。2x2<em
浏览 5提问于2016-05-26得票数 0
1回答
我正在尝试创建一个有2列并排的布局。1在背景图像上包含文本，另一个在顶部包含宽图像，下面是文本块。以下是模型的快速草图(不确定链接到任何图像的最佳方式)：所以，我遇到的问题是，如何将左侧的列文本与右侧的文本对齐？显然，它们位于两个独立的div中，因此彼此之间并没有太多的联系。这是一个CodePen：
所以我使用flexbox来设置div，使它们具有相同的高度，我不确定这是否是最好的方法？目前，文本是垂直居中的。我考虑过将文
浏览 1提问于2017-11-28得票数 0
1回答
所以我试图让一个图片文件在我的移动Wordpress主题中的div中间垂直对齐，文本在右手边。不幸的是，在图像上使用“垂直对齐:中间”会导致以下结果：这是我的CSS： <div style="vertical-align:middle"><?><
浏览 1提问于2012-10-15得票数 0
我有一个div，其中包含两个子div，它们是流体布局的一部分，所以我不能在px中为它们设置固定的大小。这里有两个目标：
显然，这两个子div没有获得父div的全部高度
浏览 0提问于2013-08-01得票数 39
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
