我如何让我的div居中对齐？
要让一个div居中对齐，可以使用以下方法：
- 使用CSS的居中对齐属性：使用
margin: auto;来实现水平居中对齐。将该属性应用于要居中的div的左右margin即可，例如：
div {
margin-left: auto;
margin-right: auto;
}- 使用CSS的flex布局：将父元素设置为
display: flex;，并使用justify-content: center;来实现水平居中对齐。例如：
.container {
display: flex;
justify-content: center;
}- 使用CSS的grid布局：将父元素设置为
display: grid;，并使用place-items: center;来实现水平居中对齐。例如：
.container {
display: grid;
place-items: center;
}以上方法可以在大多数现代浏览器中正常工作。如果需要更好的兼容性，可以使用其他方法，例如使用绝对定位等。
在腾讯云中，可以使用腾讯云CDN加速服务来提高网页的加载速度和访问效果。腾讯云CDN是一种内容分发网络，通过将静态资源缓存在全球各地的节点上，可以加快用户对网页的访问速度。
产品介绍链接地址：腾讯云CDN
相关·内容
如何让遮罩div中的center div居中对齐？ 样式： <style type="text/css">
.mask {
position: absolute; top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
width: 100%;
height: 100%
浏览 50提问于2018-07-20得票数 0
回答已采纳
如何使图片水平居中，同时与容器底部对齐？
我已经能够让图像在水平方向居中。我还可以自己对齐容器的底部。但我不能同时做这两件事。
这就是我所拥有的：
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<a href="...">&
浏览 2提问于2008-11-18得票数 40
回答已采纳
1回答
我有一些单选按钮，我需要居中对齐，他们是。唯一的问题是左侧的按钮现在不是统一的。如下图所示：
我该如何让它们居中，同时使它们对齐？
我使用text-align: center;将所有内容居中。
这是我的HTML：
<div class="select clearfix">
<div id="product-select" name="id">
<input type="radio" value="273138236" name="product"&
浏览 2提问于2013-02-24得票数 0
回答已采纳
4回答
我在一个absolute定位的包装器中放置了这个fixed定位按钮。我想在包装器内对齐按钮，但要向右对齐。
现在，我只能在包装器中居中对齐，或者在包装器中向左对齐。
我知道fixed的位置打破了流程，但我知道这样做是可能的，我只是不知道如何让它工作。
下面是标记：
<div id="nav-container">
<div id="logo-white">LOGO</div>
<div class="menuButton">menu</div>
</d
浏览 0提问于2015-05-17得票数 2
4回答
我正在使用以下代码居中对齐我的网页，
#parent{
margin:0 auto;
width: 960px;
}
<div id="parent">
<!--more code goes here-->
</div>
属性已移动到所有子div's，导致它们居中对齐。我不是一个CSS程序员，但我记得有一个技巧可以让父div元素只粘着父div。请帮帮忙。谢谢
浏览 0提问于2012-09-30得票数 0
1回答
如何垂直对齐浮动元素？
我目前在一个包装div中有3个元素(一个图片漂浮在左边，另一个图片漂浮在右边，还有一个div的边距为0居中)。它们当前在顶部对齐，但我希望它们在div的底部对齐。
这是一个响应式布局，如果不在它们上使用位置绝对，该如何实现呢？我试着让它们成为display:inline-block和vertical-align: bottom，但这没有任何帮助。
浏览 0提问于2012-08-31得票数 0
我试图让文本在html div中绝对居中，即使它比包含的div更宽。
只要文本小于封闭的div，文本就是居中对齐的，但当它超过封闭宽度的宽度时，它就会左对齐(我在最新版本的Chrome、FF、IE上检查了这一点)。
我有这个：
<style>
.container {
position: relative;
width: 300px;
height: 200px;
text-align: center;
margin: auto;
white-space: nowrap;
浏览 3提问于2011-12-21得票数 1
回答已采纳
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
回答已采纳
保持水平列表项居中对齐的最佳语义方式是什么？
是否可以保持此代码的项目居中对齐
<ul id="items">
<li>item 1</li>
<li>item2</li>
<li>iem3</li>
</ul>
li {list-style:none; font-size:16px; float:left; font-size:14px}
我在search 上发现了这种方式
有没有其他更好的方法？不需要额外的div
有什么技巧可以让这个ul li { }保持列表项
浏览 5提问于2011-04-18得票数 3
回答已采纳
这是我的
<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
回答已采纳
我需要将文本居中。我使用了文本居中对齐，但下一行居中。我需要它与顶部的线对齐。
<div class="box">
<div class="text">Some text.Some text.Some text.Some text.Some text.Some text.Some text.
Some text.Some text.Some text.Some text.Some text.</div>
</div>
如何在下一行不相对于顶行居中的情况下将文本块居中？
浏览 0提问于2013-05-15得票数 1
回答已采纳
1回答
我正在尝试让我的网站根据屏幕的大小而流动。我创建了这个：。它工作得足够好了。内部的两个div在同一行中居中并且相邻，当它们匹配时-但当它们不匹配时，它们在各自的行中居中。
这是HTML。CSS和JavaScript也在其中。
<div class="divContainer">
<div class="div1">
<img src="http://placehold.it/200x300/EEEEEE/000000" />
</div>
<div class="d
浏览 3提问于2013-05-30得票数 2
回答已采纳
2回答
我有一个关于使用div#container居中页面的问题，通常容器代码是这样的：
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
容器div标签包装了我想要在其中居中对齐的那部分代码。
例如，我们有2个对象A和B，_object A是绝对位置，B是相对位置
对象A和对象B都包装在容器内
问题:只有对象B(相对位置)居中对齐，对象A(绝对位置)不居中对齐
那么，如何将已经定位为绝对位置的东西居中呢？感谢您的解释
浏览 2提问于2009-06-15得票数 2
我想让我的div2居中对齐，div3在右边。
我尝试过使用text align: center for main div并将float right设置为div3，但考虑到main div的其余部分，它使其居中对齐。我已经给出了display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px
浏览 5提问于2017-04-18得票数 4
我不想将div居中，我希望div的内容居中。我想要水平和垂直对齐。
很抱歉，如果这太简单了，或者其他什么，但是这是一种麻烦，让它正确的。
格雷
我正在使用IE7
浏览 0提问于2010-12-21得票数 3
我有一个网上相册。缩略图页面是一个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
回答已采纳
我试图在父容器中对齐子元素。下面是我的代码片段。这只是让它工作的基础：
// HTML //
<div class="parent">
<div>Parent</div>
<div class="child"></div>
</div>
// CSS //
.parent { position: relative; }
.child {
position: absolute;
margin: auto;
height: 60px;
w
浏览 1提问于2015-05-12得票数 3
3回答
如何水平对齐溢出文本？
、、、
我有一些可以溢出父容器的文本： body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
} <div class="container">
<div class="header">
Short Text
</div>
<div class=&#
浏览 10提问于2019-12-10得票数 0
回答已采纳
有没有一种“顶部对齐”UILabel的方法，那就是让文本粘贴到标签视图的顶部？而不是垂直居中对齐，或在视图的中心浮动，这是默认的吗？
这是三个标签的图像，左对齐、右对齐和居中对齐，以及一个居中和顶部对齐的UITextView。无论视图的垂直大小如何，textView的文本都会显示在顶部。我可以对标签做同样的事情吗？
浏览 1提问于2012-08-08得票数 30
回答已采纳
我找不到如何使用flexbox将div元素垂直居中对齐，并将页脚元素与页面底部对齐。 HTML和CSS .section {
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
}
.section__header {
text-align: center;
}
.footer {
margin: auto;
浏览 27提问于2021-03-27得票数 1
下面的表单(我已经删除了所有其他行)在它的父div中很好地居中显示。问题是，当我开始编辑字段时，如果出现验证错误，当验证消息出现在编辑器的右侧时，整个表单将重新居中以显示新的内容宽度。非常烦人。然后，我尝试将所有的ValidationFors移到一个单独的右对齐的div中。不过，问题是一样的。只要在右对齐的div中出现错误，中心表单就会移位。
我如何：
1)让窗体居中显示，但在初始加载后停止自动居中？将验证消息显示在编辑器的右侧是很好的，但我不希望屏幕布局不断变化。
2)有没有办法预先分配一些隐藏的左右宽度，以便主要表单元素(标签和编辑器)居中，并且验证消息不会进入居中内容？
<tab
浏览 0提问于2015-05-18得票数 0
2回答
我已经尝试了很多不同的方法，试图用中间的纸来对成分进行居中，但一直没有效果。当我添加文本对齐:居中；在“成分”类中，成分确实向中间移动，但它们彼此不对齐，如果这是有意义的话。我能把原料集中起来让它们对齐吗？下面是使用文本对齐: center；时发生的情况的一个示例。此外，我是一个编程lol的新手，只是慢慢地通过Odin项目学习。谢谢。
HTML：
<div class="border">
<div class="ingredients">
<input type="checkbox" name
浏览 9提问于2022-06-27得票数 -2
6回答
DIV居中对齐
、、
我有div，它的所有内容都对齐到中心：
<div align="center">
<table><tr><td>.....
但是align不是更有效的属性。因此，我已经更改为class或style：
<div style="text-align:center;">
但这和以前不一样了。表格现在左对齐，而不是居中对齐。显然，文本对齐不等同于旧的居中属性。我应该如何编写样式，以实现与以前使用center属性相同的功能？
浏览 2提问于2014-11-04得票数 4
2回答
我有这样的安排
...<td>
<div></div>
<div></div>
<div></div>
</td>
div标记用动态数据填充。我将div标签放在td单元格中，因为中间的div填充了一个图像，它可以是不同的高度。我要做的是让顶部的div与单元格的顶部对齐，让底部的div与底部对齐，让包含图像的中心div填充中间的整个空间并居中对齐。到目前为止，我所有的尝试都失败了，并且由于某些原因(是的，我已经看过了，没有竞争的样式)，我无法让div填充
浏览 4提问于2010-10-09得票数 0
我对web完全是个新手。我正在尝试一些样本网站。
现在我被困在一个div中，我想让一个特定的div向左对齐，而其他兄弟div却从父div获得居中对齐的属性。
有没有人可以帮我移除特定div的属性并添加新的属性？
浏览 1提问于2014-03-23得票数 0
3回答
我可以成功地在CSS中对文本框进行居中。但是居中的Textboxes没有对齐。我如何对齐它们？
我的html代码：
<div data-bind="dxList: { dataSource: dataSource}">
<div data-options="dxTemplate : { name: 'item' } ">
<div class="wrapper">
<div data-bind="text: name
浏览 3提问于2016-11-16得票数 0
回答已采纳
4回答
如何使窗体居中
、、、、
我有一个简单的表格..。
<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">
这就是到目前为止的CSS；输入元素按照需要垂直排列。
<div>
<label>name</label>
<input type="text" id
浏览 0提问于2011-07-19得票数 0
回答已采纳
3回答
如何将img居中对齐，使其与下方的文本对齐？包装器div左对齐。
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
浏览 0提问于2017-11-06得票数 0
我知道这是一个常见的问题，但我似乎就是答不对。我已经尝试了所有的东西，除了一件能让它工作的事情，包括各种位置以及清晰和溢出设置的组合。这是我的代码(为了张贴而删减)
<style>
#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; ve
浏览 1提问于2009-10-01得票数 0
回答已采纳
1回答
我有以下代码，我想让我的标签在文本区域的中间对齐：
<div class="form-group">
@Html.Label("Message", new { @class = "col-md-2 control-label" })
<div class="col-md-6">
@Html.TextArea("Message", new { @class = "form-control", rows = 10, style="verti
浏览 0提问于2015-06-19得票数 0
5回答
我正在尝试创建一个页脚根据我收到的设计…
左边的背景颜色和右边的不一样：
我有以下标记：
<div class"wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
我的想法是内容DIV的标志作为背景图像左对齐，没有重复。
但是我不知道如何在左边和右边创造不同的颜色。
我不确定我是否能控制好高度，让所有的东西都对齐。
内容div居中并且在图像上有橙色边框...
谢谢,
米
浏览 0提问于2014-04-09得票数 0
1回答
我使用css已经有几年了，但是这个问题真的让我很困惑。我想要右对齐一些文本，并在空间可用时使文本在较大的屏幕上保持内联。当屏幕尺寸缩小(在移动设备上)，文本分成多行时，我需要文本居中但仍然右对齐。
例如：
足够的空间，一行上的所有内容都正确对齐：
------------------------------------
Total Amount: $200,000|
------------------------------------
在小屏幕上，文本以多行居中并右对齐：
--------------------
Total Amount:|
浏览 1提问于2018-10-22得票数 0
1回答
很长一段时间以来，我一直在使用设计控制来传递图像。然后我使用CSS来隐藏或不隐藏块中的特定图像。 现在我想使用来获得更多的灵活性和可控性。 我的问题是标题。我想将我的标题与图片对齐，就像我可以做的那样，而不是在它的容器div中。目前，我的标题只能在容器对齐时对齐。如果图像居中，则标题居中；如果右对齐，则标题右对齐。我可以做的就是让我的图片在页面上居中，我的标题相对于图片右对齐，我正在尝试独立地做什么。令人困惑？ 下面是我目前正在使用的一个示例： div.dImage {
text-align: center;
margin: 0 auto 2% auto;
浏览 14提问于2020-11-02得票数 0
回答已采纳
2回答
我试着让两个div居中，左边对齐，右手对齐中间，我不明白为什么右手会这样对齐。
#pageWrapper
{
/* display: flex; */
/*justify-content: center;*/
text-align: left;
padding: 50px;
display: inline-block;
}
#navbar
{
width: 180px;
margin-right: 10px;
opacity: .8;
display: inline-block;
}
<div id
浏览 1提问于2017-05-07得票数 0
3回答
我尝试使用layout-align = "center center“，它可以让内容在垂直和水平方向上居中对齐。但它只是水平对齐内容，而不是垂直对齐。
下面是我正在尝试的代码的plnkr 。
<body ng-app="app" ng-controller="appCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 flex>Hello Angular-material!</h2>
</div>
</
浏览 1提问于2015-11-20得票数 11
回答已采纳
2回答
我在将一个元素与flexbox对齐时遇到了问题。我知道如何将元素居中、右或左对齐。但是我想要做的是使一个元素离右边框只有30%的距离。如何使用flexbox控制元素和容器边缘之间的精确距离？类似于带bootstrap的偏移量？ 我见过一些技巧，其中所有元素都对齐到be flex start，最后一个元素具有边距-left:auto。但这只会让它向极右翼靠拢。 我尝试将边距设置为右侧: 30%，但在移动设备上，它导致其他元素向左对齐时出现问题。 .container {
display: flex;
height: 50px;
}
.aligned {
margin-left
浏览 26提问于2021-09-01得票数 0
2回答
看这把小提琴：
我有两个div作为内联块显示。由于某些原因，我的div是居中的，尽管我希望它们与左边对齐。我如何对齐我的div，使匹配与我的.main div和左对齐？
提前感谢！
浏览 2提问于2014-06-01得票数 0
回答已采纳
1回答
我有多个固定宽度的div，其中包含包含不同长度文本的<p>标记。
我希望此文本保持左对齐，但如果文本占用的空间不像div宽度那样大，我希望将此文本居中对齐。
我认为实现这一点的最好方法是在<p>中水平居中，同时保持文本左对齐，但我不确定如何做到这一点。
我尝试过设置margin:0 auto;，但<p>总是调整到div的宽度(除非我另有说明，但我不想这样做，因为如果文本运行的时间比div长，我不想过早中断它…)
我在这里设置了一个JSfiddle来演示：
(基本上在这个例子中，我想要"Lorem ipsum...“在不使用text-align:cen
浏览 3提问于2012-11-30得票数 12
回答已采纳
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
回答已采纳
1回答
如何在bootstrap 4中居中对齐分页？我放置了代码，分页一直按在左边，但它需要居中。我对父元素应用了类text-center，它也没有帮助，虽然文本对齐了，但由于某些原因，它不能与分页一起工作。 <div class="text-center">
{{$posts->links('vendor.pagination.bootstrap-4')}}
</div>
浏览 15提问于2020-09-30得票数 0
3回答
我试图让我的文本元素在一个更大的div中垂直居中，这个div是蓝色的。我特别定义了高度和对齐，如下所示：
vertical-align: top; //middle actually puts it even lower
height: 83px; //the same as the larger area
但是，我不能让它在蓝色框的中心垂直对齐。任何帮助都将不胜感激！
浏览 0提问于2016-01-21得票数 0
2回答
我有以下html：
一个div，它包含一个标签和该标签的下拉列表(select)。在标签和dropdown上放置一个vertical-align:center，结果是标签居中，但dropdown不居中。我认为居中的是“下拉列表上下相等的间距”。IE显然认为居中的是将下拉列表的底部与标签的底部对齐，不幸的是，这看起来并不是很好。我该如何解决这个问题呢？
编辑:这并不紧急，因为position:relative；很容易修复这个问题，但使用position:relative；让我很恼火，不应该是必要的。
浏览 1提问于2011-04-11得票数 0
回答已采纳
2回答
我有一个按钮，我想在ionic中居中，我已经尝试了文本对齐: center！重要，但它不会随着它上面的项目居中，让它看起来很奇怪。如何将“稍后可能”按钮与其上方项目的文本很好地居中
下面是我尝试过的html
<ion-content no-padding>
<ng-container style = "text-align: center;" *ngIf = "nextOptions == 'previous'">
<ion-item lines="none" no-p
浏览 0提问于2019-11-25得票数 5
回答已采纳
6回答
我想让我的div1内部元素垂直居中。 正如您在我的div1 display中看到的，如果我使用display: table-cell，它会垂直对齐元素，但元素会移到顶部，而不是居中。 但是如果我使用display: flex，它会保持元素居中，但元素是水平对齐的。 .div1 {
height: 200px;
width: 100px;
background: white;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
vertical-al
浏览 65提问于2017-02-22得票数 1
回答已采纳
2回答
假设我有以下代码
p {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
<p>
Some text
<div>
</div>
</p>
创建的是这样的
这里的inline和inline-block元素没有垂直居中。我如何让它看起来像这样：
浏览 0提问于2019-02-27得票数 0
1回答
我有div，我想让它的内容垂直居中对齐。
我将css与display: table-cell一起应用，然后设置vertical-align: middle，但它不起作用：
这是链接：
div的内容一直在变化。
在这里，我希望具有类"EntryFormControlDiv“和"EntryFormLabelDiv”内容的div应该在类"EntryFormRow“的div中垂直对齐。
任何帮助都是非常感谢的。
浏览 4提问于2011-11-03得票数 0
回答已采纳
到目前为止，我对该网站的布局如下：
HTML
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
some more stuff here
</tbody>
</table>
CSS
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius:
浏览 0提问于2014-10-23得票数 0
我希望将页面正文中的所有元素居中，而不将居中格式应用于段落。例如，我希望我的段落左对齐，但作为一个整体，在网页窗口居中。
我试着去做
<body>
<div align="center">
<p></p>
<img>
</div>
</body>
但是，虽然这会使正文中的所有元素在页面上居中，但它也会强制段落内居中对齐。
浏览 3提问于2011-12-27得票数 0
13回答
如何将iframe水平居中？
、、、、
考虑以下示例：()
HTML：
<div>div</div>
<iframe></iframe>
CSS：
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
结果：
为什么iframe不像div那样居中对齐？我如何将其集中对齐？
浏览 1提问于2011-12-03得票数 277
回答已采纳
7回答
我使用的是，它工作得很好，只是它可以左对齐标题组中的所有文本。
如何使页眉组文本在单元格中居中？
这是一个屏幕截图，向你展示它在默认情况下是如何工作的：(我想让"Books“居中对齐”)
注意:常规列标题居中对齐。
浏览 5提问于2011-10-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
