Div没有对齐，尽管它们是内联块
问题：Div没有对齐，尽管它们是内联块。
答案：当在HTML中使用div元素创建多个内联块时，出现对齐问题可能是由于以下几种原因引起的：
- 盒模型：div元素的宽度可能超过了其容器的宽度，导致对齐问题。可以通过设置适当的宽度或使用CSS的box-sizing属性来解决该问题。
- 浮动：如果div元素被设置为浮动，可能会导致对齐问题。可以尝试清除浮动或使用CSS的clearfix技术解决该问题。
- 文字溢出：如果div元素内部的文本内容超出了其容器的宽度，也会导致对齐问题。可以使用CSS的文本溢出属性来处理该问题。
- 内容高度不一致：如果div元素的高度不一致，可能会导致对齐问题。可以使用CSS的垂直对齐属性来解决该问题。
推荐的腾讯云产品：腾讯云服务器（CVM），可提供高性能的虚拟服务器实例，适用于各种Web应用场景。
产品介绍链接：https://cloud.tencent.com/product/cvm
相关·内容
我在试着把一个div和前面的div对齐。
我使用过vertical-align:top;，但它似乎根本不起作用，而且它也没有将div与顶部对齐。
为了解释这一点，我创建了这个
这是我需要与前一个div的顶部对齐的div：
<div style="display:inline-block; background:#EFEFEF; border-radius:4px; margin:5px; padding:10px;">
<p style="font-size:12px; font-weight:bold; padding:5px;vertical-al
浏览 4提问于2016-01-26得票数 1
回答已采纳
2回答
我有3个div，其中包含内容，而内容较少的2个则与较大div的底部平齐。
没有毛边和垫子，所以我不知道为什么会发生这种事？
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
}
<div class="container">
<div clas
浏览 1提问于2014-11-18得票数 0
回答已采纳
1回答
这听起来可能是一个过时的话题，因为没有人仍然使用内联块属性，这要归功于flex-box和grid，但是我想知道它，我想询问它。
当创建两个div并分配它们作为内联块显示，然后在其中一个中添加任何元素时，结果是非常奇怪的，其中包含该元素的div将滑到另一个div的底部，减去添加的元素的高度。
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
<div id="left">
<span>Text</span&
浏览 2提问于2018-08-15得票数 4
回答已采纳
考虑一下这个HTML：
<div id="x">Foo</div>
<div id="y">Bar <span>Baz</span></div>
这个CSS：
#x {
background: orange;
display: inline;
font-size: 200%;
}
#y {
background: cyan;
display: inline;
vertical-align: top;
}
下面是JSFiddle演示：
在Firefox 28.0和8中
浏览 4提问于2014-04-09得票数 3
回答已采纳
1回答
我有这个简单的CSS代码：
div {
width:100px;
height:100px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
text-align:center;
}
这段HTML代码如下：
<div>
</div>
<div>
</div>
我很难尝试用inline-block在屏幕上水平居中这两个DIVs。margin auto和text-align center都不工作。
浏览 1提问于2014-09-14得票数 0
<form style="background-color:pink; height:100px">
<label for="button-test">Add your name here</label>
<input type="text" id="button-test" name="button" placeholder="add your name here">
<div style="di
浏览 2提问于2020-06-19得票数 1
回答已采纳
垂直对齐:底部，表示底部的内联框与其行框的底部相匹配，因此在我的例子中，span2的内联框是绿色的，其行高为100 of，继承自其父框。它的线框是黑色的，也有线高:100 is。所以它们是底部对齐的。见图：
我已经了解到：
1.垂直对齐只适用于内联/内联块元素。
2.垂直对齐是基于直线高度，而不是其容器的高度！
3.在线框中，其线高是内嵌框的线高(在我看来，它的内嵌元素或内嵌块元素)具有最高的直线高度。就像图片：
在内联块元素上，一切都很好，但内联元素似乎存在问题。
解释：
父母:身高:200 parent，直线高度；100 parent；
Div.child:内嵌块，垂直
浏览 1提问于2017-04-09得票数 1
回答已采纳
我是一个入门级的web开发人员，我试图确保我理解我所做的每一件事背后的HTML“逻辑”(如果有的话)，而不是仅仅在我曾傑瑞一开始就把我的页面设置成我想要的样子。
例如，我希望一个textarea对象在特定的div中水平地以中心为中心，因此我给出了div属性text-align: center;，我从经验中知道它将完成我的预期任务。但我想确保我完全理解为什么这会起作用。
任何答案都非常感谢。
浏览 0提问于2014-04-22得票数 1
回答已采纳
我正在尝试创建一个包含100% .container div的页面(每个页面内部都有自己的div)，从而产生一个长的单页设计。但是，当我从.container中移除边界时，它们都会崩溃。
有人知道为什么会这样吗？
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border: 1px solid salmon;
}
html, body {
width: 100%
浏览 1提问于2013-08-09得票数 0
我这里有一个容器，里面有三个子div，它们是inline-block。现在，当我在孩子一中添加一个像div或段落这样的孩子时，父div会向下推。我已经知道解决方案了。如果我使用顶部垂直对齐的属性，这个问题就解决了。但我只是好奇地想知道原因是什么？
body{
margin:0
}
#navbar {
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo {
height:60px;
width:90px;
}
浏览 0提问于2017-09-14得票数 5
在这方面：
<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" value="push me" />
</div>
该按钮在FF、Chrome、IE7和IE8中与浏览器窗口的中心对齐(如所需)。
但是，在按钮中添加"display:block“：
<div id="parentdiv" style="text-align:
浏览 2提问于2011-01-15得票数 8
回答已采纳
1回答
我正在使用Jquery幻灯片面板来处理一些图像。我遇到的问题是当幻灯片显示它将旁边的图像向下移动。我不希望这种事发生。是否有方法显示滑块面板，但不移动它旁边的图像？有类似的问题，但在网站上没有答案。
下面是没有图像文件的jsfiddle：
这是我的密码：
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg
浏览 2提问于2016-08-31得票数 1
有人知道为什么text-align: center和text-align:-webkit-center有区别吗？例如，如果您有：
<section>
<h1>Title<h1>
<div class="image"></div>
</section>
// CSS与文本对齐:居中；
section{
text-align: center;
}
这将仅使文本居中
// CSS with text-align：-webkit-center
section{
text-align: -webkit-ce
浏览 0提问于2016-02-01得票数 22
2回答
所以..。我有一个动态宽度的页面。下面，包装器div将其中的div居中。但是，每个div都有一个样式：
display:inline-block;
width:400px; /* static */
这使得内部的div并排出现。但这意味着会留下一些空格，这取决于浏览器的宽度以及有多少div可以并排进行，而不会中断到下一行。
要了解我要做什么，请打开Google Chrome新选项卡页面，然后拖动浏览器窗口将其缩小。你会看到，当你走得太远时，一些chrome应用程序会跳到下一行，但它仍然居中。
在我的例子中，它们会跳到下一行，并且不会居中。
下面是我的代码：
<div class="
浏览 5提问于2012-02-12得票数 4
回答已采纳
2回答
我试图理解文本对齐，但它似乎根据应用于哪种类型的元素以及从何处应用，无论是父元素还是子元素，都有不同的规则。
据我所知，如果我将文本对齐:center应用于div，那么所有包含的元素都将具有文本对齐:center属性。
如果我应用文本对齐:居中于内联元素(如图像)，什么也不会发生，因为图像没有作为元素一部分的周围空间。我有这段代码，我不知道为什么它的行为是这样的。我试图实现的只是简单地在标题标记中水平地对图像进行居中，并以这样的方式实现：
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
浏览 1提问于2022-09-21得票数 -1
2回答
正如您在下面的图片中所看到的，我的布局有点偏离。由于某种原因，当我在边缘的img中没有一个div标记时，它会“浮起来”。没有任何css，似乎不同的，使它这样做。在检查它时，它似乎没有遗漏任何东西，也没有任何额外的东西可以使它做到这一点。
奇怪的是，当我在里面放上input元素时，它会挂在比div的行低的位置。当我在里面放上img时，它的行为就会正常，和其他的一样。
我的html：
<div class="row">
<div class="col-md-12 center-block">
<div class=
浏览 2提问于2014-03-19得票数 3
回答已采纳
我有以下html没有任何样式应用。
<div>
<div>
<h2>Image1 Description</h2>
<img src="\images\Image1.jpg">
</div>
<div>
<h2>Image2 Description</h2>
<img src="\images\Image2.jpg">
</div>
浏览 4提问于2013-08-29得票数 0
回答已采纳
尝试在图像周围流动文本：
<div>
<span id="photo"><img src="photo.png"</span>
<span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>
CSS
#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**
文本在图像周围流动，但没有对齐(左对齐)。如果我浮动
浏览 6提问于2009-12-07得票数 4
回答已采纳
3回答
我发现了两种常用的方法，可以将固定宽度的元素水平地与CSS对齐，我希望有人能帮助我更深入地理解其中一种技术何时使用而不是另一种技术。
一种技术涉及使用text-align:center，而另一种技术涉及margin:auto。
下面我演示了如何使用这两种方法来实现相同的目标。看一看代码，可以很容易地说margin:auto方法是更好的，但是我不禁想知道是否还有其他更好的方法来完成这类事情，或者是否有text-align方法更可取的情况。
您可以在这里看到示例代码：或更低版本：
<div class="wrap1">
<h1>Hey now</h
浏览 6提问于2012-01-18得票数 3
回答已采纳
1回答
在我下面的代码中，我有一个锚标记，而在这个锚标记中，我有一个div。所以，在这里，我尝试的是对齐锚标签和div并排。在我的情况下，当我给左和右属性给div时，它隐藏在锚标记中，它没有出现在左和右之间，所以我们如何能像左舷是锚，右边是div一样对齐它。
{% if CategoriesBar%}
{% for Categories in CategoriesBar %}
<a class="trigger" href="{% url 'getProductsByCategory' Categories.
浏览 0提问于2021-07-01得票数 0
2回答
我有三个简单的div与一些化妆品风格，应该是对齐一排，其中两个有图像的左和右，而中间一个包含另一个div包含文本。
我可以在div中拟合图像，但中间的包含文本的图像并不是水平对齐与其他两个。
以下是html
<div class="eggpic">
<img src="smiley.gif"/>
</div>
<div class="timersection">
<div class="timersectiontext">Hello</div&g
浏览 2提问于2015-05-10得票数 1
回答已采纳
2回答
我无法水平对齐内联块元素.根据我所发现的，内联块元素中有一些基线对齐，但我无法理解如何对齐。如果我使用“垂直对齐:顶部”，它是有效的。我有以下疑问：
基线是如何在此示例代码中定位的。
在删除'display :内联块‘的.图标栏类时，前三个元素正确对齐。多么?
在上一步之后将ul标记为'display : inline‘时，它将对齐。但不能用“显示:内联块”
如何水平对齐元素。如果没有“垂直对齐”属性，它能完成吗？
可以将元素标记为显示:内联是元素的父级显示:块。类似地，会“显示:内联块”父级和“显示:块”子元素会引起什么问题？另外，在“display:in
浏览 1提问于2017-02-09得票数 3
3回答
在下面的示例中，<div>比其内容要小。
为什么？我该怎么解决呢？
.switcher {
border: 1px dashed green;
}
.switcher a {
padding: 30px;
background: orange;
}
<div class=switcher>
<a href=#>first</a>
<a href=#>second</a>
</div>
浏览 0提问于2018-02-01得票数 2
回答已采纳
我有两个并排的div。两者具有相同的大小和display: inline-block。两者之间唯一的区别是，第一个有一些文本，而第二个是空白的。
HTML：
<div>1</div>
<div></div>
CSS：
div {
display: inline-block;
border: 1px solid black;
width: 50px;
height: 50px;
}
第一个div比第二个div低。
我知道所有可能的修复，比如向第二个div添加一些文本或 。当然，添加vertical-
浏览 2提问于2013-06-20得票数 5
回答已采纳
2回答
没有对齐，这是我的代码：
HTML：
<li><div class="card">
<img src="uploads/image/default_profile.jpg" width="195" height="260" />
<p><strong>Dr./BGen. Antonio L. Tamayo</strong><br>
<strong>AFP, FPCHA, Ph. D</
浏览 0提问于2016-10-01得票数 1
1回答
我似乎无法解决为什么我的两个div没有以页面为中心的问题。我知道这是因为float: left。但就我而言，我想不出怎么解决这个问题。有人能帮上忙吗？
这是我的HTML：
<body>
<div align="center">
<div id="left" class="left">
Left box needs to be on left of of white box
</div>
<div id="content" class="content"&g
浏览 1提问于2011-01-26得票数 2
回答已采纳
1回答
请运行演示：
* {
margin: 0;
padding: 0;
}
.body {
font-family: Microsoft Yahei;
font-size: 16px;
background-color: lightblue;
height: 400px;
width: 400px;
line-height: 2;
vertical-align: baseline;
}
.body span {
background-color: pink;
}
.body .inline-block {
display: inline-blo
浏览 1提问于2018-05-19得票数 3
回答已采纳
我只是有一个像div或button这样的容器，它包含一个带有填充的内联元素--容器并不适合内联元素。
button, div {
background: blue;
}
span {
background: orange;
/*display: inline-block; */ /* toggle to see container element grow */
padding: 4em;
}
hr {
margin:100px;
}
<div>
<span class="btn__content">
浏览 3提问于2017-07-12得票数 2
回答已采纳
正如您在附图中所看到的，.grid-item div中的内容没有确切的高度(在我的例子中是<img>)，但它似乎在底部添加了几个像素。
我如何告诉.grid-item div使用其内部图像的确切高度？
理想情况下，如果可能的话，我希望保持div的absolute和relative定位，如下例所示。
HTML结构：
<section>
<div class="grid-item">
<div class="item-content">
<div class="capt
浏览 1提问于2016-02-10得票数 0
回答已采纳
我确信这是一件非常简单的事情，但我一整天都在用头撞它，所以我决定直接问。
我有一些div，我想在他们的父div中与右对齐。如果我没有指定宽度，“文本对齐:右”工作：
<div style="text-align: right;">
<div>
This text aligns to the right
</div>
</div>
但是，如果我在内部元素上设置一个像素大小，它就不会：
<div style="text-align: right;">
<div
浏览 2提问于2014-03-06得票数 2
回答已采纳
1回答
正如您所看到的，我有一个主目录(id="main_div")，其中包含两个仅包含文本的图片id =“id=”的链接
<div id="main_div">
<div id="logo" class="headers">
<a href="http://www.hawkaviation.com" target="_blank">
<img src="http://www.badcomp.com/wp-
浏览 1提问于2013-06-27得票数 0
好的，我想要你可以在绿色中看到的东西，显然我做到了，问题是我当然使用了固定的大小，所以它很容易随着浏览器大小的调整而变得混乱。
我一直在努力找出如何解决这个问题，但尽管看起来很简单，似乎没有相关的解决方案能做到这一点(我在这里读到了很多答案)。
关于如何解决这个问题，让标签文本留在左边，输入字段留在右边，你有什么想法吗？
问题从包含文本"Fullt personnavn“的标签开始，下面是HTML/CSS：
form
{
font-family:Candara;
display: block;
}
label
{
display: inline;
}
浏览 0提问于2015-11-23得票数 2
我想显示两个具有宽度和高度并排的<div>元素.我将inline-block应用于<div>s，但左侧元素的位置很奇怪：
HTML：
<body>
<div id="myDivTag">content</div>
<div id="map-canvas">for google map API</div>
</body>
CSS：
#myDivTag, #map-canvas {
display: inline-block;
h
浏览 4提问于2016-01-11得票数 5
回答已采纳
1回答
关于svg的流模型的质疑
、、、
我有以下代码：
body { background-color: black; }
.root { background-color: aqua; }
.svg-container { background-color: lightgray; }
svg { background-color: red; }
.btn { background-color: yellow; }
.svg-container, .btn {
display: inline-block;
}
浏览 0提问于2017-04-12得票数 0
为什么text-align要把文字和图像中心化？
CSS：
#SupplierContainer {
width: 100%;
margin: 0 auto;
background-color: Blue;
}
#SupplierContainerContentHolder {
background-color: Yellow;
text-align: center;
}
HTML：
<div id="SupplierContainer">
<div id="SupplierContaine
浏览 3提问于2012-10-27得票数 7
回答已采纳
我有一个很简单的导航条，有五个按钮。它们中的每一个都从box-shadow: 0px 4px #777777开始，提供一个3D外观，还有一个.navbarright a { display: inline-block }将所有的按钮水平排列起来。下面是HTML：
<div class="navbarright">
<a href="x"><div class="navbutton" id="x"> x </div></a>
<a href="
浏览 1提问于2014-07-30得票数 0
回答已采纳
2回答
我有两个按钮，一个是A元素，另一个是按钮元素。它们都有相同的类(class="button button--icon")。当我对它们应用相同的CSS时，使用这些类时，按钮的显示方式就不一样了。
这两个元素之间的区别是，A元素是它们包含LIs的直接子元素，但是按钮元素被包装在一个表单中，该表单包含在LI中。
A按钮的垂直位置高于按钮的垂直位置。
我试过的这些东西并没有解决我的问题：
硬编码所有字体大小到16 to；
分别对包含的LIs和As应用边距或垫片(这只会将我的整个UL向下移动)
对A和按钮都应用相等的垂直边距。
将A也包装在表单中(没有效果，因为我没有造型
浏览 0提问于2015-04-22得票数 4
回答已采纳
3回答
我正在尝试将3个div与完全相同的高度对齐。最右边的两个是完全相同的，都很好，但左边的大的一直在他们的上方。
我已经考虑到两个较小的div的边框宽度为2px，但这并没有改变任何事情。
我甚至将容器div设置为元素的确切高度，但它们仍然不是垂直对齐的：
<div id='section_4_row_1'>
<div id='double_wide_image'></div>
<div class='section_4_module top'>
&
浏览 2提问于2015-05-07得票数 1
下面的样式导致div元素未对齐：
我不知道这个样式是在哪里设置的，我搜索了代码库，但这似乎是由浏览器设置的？
如何删除此样式，当我使用Chrome删除'left‘样式时，我得到正确的对齐方式。这种风格是在哪里设置的？
下面是设置样式的div：
代码如下：
<div class="multipleColumns" >
但当我检查Chrome上的元素时，代码如下：
<div class="multipleColumns" style="left: auto; display: none;"
所以看起来样式‘styl
浏览 1提问于2013-02-01得票数 2
回答已采纳
2回答
我有三个id红色，绿色和蓝色的div在另一个div与id粉红色。我所期望的是红色、绿色和蓝色，这一切都是合理的。我还期望每个元素的宽度都等于其中最宽的子元素的宽度。但正在发生的是，它们是对齐的底部粉红色。此外，当孩子被添加到其中一个，它的宽度以及它的高度增长，增加粉红色的宽度和高度。
我的问题是三重。首先，为什么红色、绿色和蓝色没有对齐到粉红色的顶部；或者更准确地说，为什么它们与粉红色的底部对齐？第二，为什么当我把孩子加进去时，红、绿或蓝的宽度会增加--即使孩子是垂直排列的？最后，我必须改变红，绿，蓝，以对齐的顶部粉红色和宽度的每一个等于它最宽的孩子的宽度？我试图澄清我的问题，所以如果我说得不
浏览 0提问于2018-03-01得票数 2
回答已采纳
2回答
内嵌块元素水平对齐
、、、
我正努力做到以下几点：
我试着让div显示为内联块，其余的宽度(空格)应该均匀地分布在div周围(如边距: auto)。
我试着让div顶部而不是底部边框对齐，根据每个div的高度，为每个div留下指定的上、上边距。就像所附的图像
()
[示例： ] css：
#container {
min-height: 200px;
margin: 0;
padding: 10px;
border: 2px solid green;
}
#container div {
border: 2px solid red;
padding: 10px;
disp
浏览 1提问于2019-08-16得票数 1
回答已采纳
在本例中，我将使用2个DIVs
<div>
<div class="element"></div>
<div class="element"></div>
</div>
使用CSS
.element { float: left; }
好的，上面是一种以内联方式显示块的方法。我最近遇到了另一种方法：
<div>
<div class="element"></div>
<div class="ele
浏览 1提问于2014-10-31得票数 0
2回答
在li中，我有一些元素，如img和a，我希望在单行中对齐所有这些项。但我不能那么做。例如，您可以看到
我的html：
<div class="" id="menu_section">
<ul id="menu">
<li data-menuanchor="firstPage"><img src="imgs/verify.png"><a href="#firstPage">First Slide</a>&l
浏览 0提问于2015-09-14得票数 1
回答已采纳
4回答
我试着垂直对齐一个h1元素和一个浮动在左边的div中间的p，但它们最终彼此垂直对齐。我非常确定这与表单元格显示有关，但不知道如何在没有它的情况下垂直对齐。
我的代码给了我：
.
.
Heading Paragraph
.
.
我想要：
.
.
Heading
Paragraph
.
.
下面是我的代码：
CSS：
#HDRtext
{
float: left;
width: 30%;
height: 335px;
padding: 0;
display: table;
color: white;
}
#HDRtext h1
{
浏览 0提问于2012-06-21得票数 0
回答已采纳
我刚开始学习HTML，现在我有了一些代码
<div id="container" style="height:300px;width:500px;font-size:0">
<div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;">
<div id="wrapper" style="height:10%;">
浏览 2提问于2013-04-10得票数 8
回答已采纳
我有一个父div，它的宽度固定在150px。当我创建一个子div时，firebug说它的宽度也是150px。为什么会这样呢？
因此，当我尝试使用自动页边距来水平对齐div时，并没有什么不同。有没有办法覆盖自动为子div设置的150px宽度？
浏览 2提问于2012-01-13得票数 0
1回答
我有这样的标记
<div> <label for="a" class="float-left">column 1 row 1</label> <input type="text" value="column 2 row 1" id="a" class="float-left"/>
<div class="float-clear"></div>
<div> <label for="b
浏览 0提问于2012-12-06得票数 0
回答已采纳
3回答
这是一个
see jsfiddle
有人能说出为什么我每行看到3个元素吗。似乎应该有4，因为width是25%。以及如何修复它？也许有人知道如何用引导列来实现这样的东西？
我试图从中心对齐一个未知数量的div..。
浏览 9提问于2017-01-08得票数 0
回答已采纳
1回答
我在我的新网站上遇到问题。但首先我要给你一些信息。
我正在建立一个完整的响应式网站与投资组合。我的作品集图像站在DIV中，并对屏幕大小做出响应。在超过1005px的屏幕上，它工作得很完美。此外，缩放效果也很好。这是因为下面的CSS行：
@media only screen and (max-width: 1005px) {
带有我的图片的div是newtextportfolio。除了100%的宽度和高度之外，图像本身不使用CSS。当我给我的div定义如下(height: auto;)时，我的图像下面会出现一条白线。我不想要那条白线：
.newtextportfolio {
width:
浏览 0提问于2016-01-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
