在阅读了这个之后，我想：
为什么在CSS3中没有一种单一的垂直对中方式？
为什么我不能用CSS属性做一个<div>，并使我的内容垂直居中呢？
浏览 2提问于2012-09-25得票数 2
回答已采纳
我想居中我的div，我使用这个方法，但它使我在div中的文本变得模糊：
<!-- language: lang-css -->
#div {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
有什么方法可以让我的div居中吗？
浏览 13提问于2015-06-29得票数 88
2回答
我想使用css在div中(水平地)居中(内联)三个图标。我的div在另一个div中居中，但我希望内容(三个图标)在该div中居中。
<div id="browsers">
<div id="browsers-wrapper">
<img src="Images/firefox.png" class="browserIcons">
<img src="Images/chrome.png" class="browserIcons">
&l
浏览 1提问于2015-01-07得票数 0
6回答
简单的CSS查询
、、
<div class="priceBox">
<a href="#">
<div class="priceBtn">
<span class="priceBtnTxt">Order Now</span>
</div>
</a>
</div>
这些类需要什么CSS属性才能使priceBtn在priceBox中居中？
浏览 1提问于2010-09-07得票数 2
回答已采纳
我试图让文本在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
回答已采纳
有人知道为什么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
3回答
我想知道如何使这个居中，它挂起了，我想让它像这个一样居中，这样灰色部分就会进入边界。下面是css代码和它的html : css：
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
html：
<div id="banner" ></div
浏览 1提问于2012-10-21得票数 3
回答已采纳
如果我像这样设置div的CSS页边距属性：
div { margin-left: auto; margin-right: auto; }
我得到一个在页面中水平居中的div，。
但是，如果我将CSS更改为：
div { margin-top: auto; margin-bottom: auto; }
我的div不是垂直居中的。我不需要知道解决方法( )，但我想知道发生这种行为的原因。为什么上边距和下边距不能以相同的方式工作？我遗漏了什么？
浏览 1提问于2011-07-21得票数 20
回答已采纳
1回答
首先，我有一个非常随意的问题，在列表中垂直居中放置图像。大多数教程建议使用line-height = image-height或将列表项分配给表格，并使用vertical-align:middle。这两个似乎都不适合我。我的第二个问题是没有jQuery的可点击列表链接行。我应该让锚点display:block并将宽度设置为100%，但随后它在另一行中断，并且没有扩展到左侧图像块。
这是我的标记：
<ul>
<li>
<a href="#">
浏览 0提问于2012-01-19得票数 1
回答已采纳
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
3回答
我正在尝试理解react中的利润率的一些功能，但仍然是React的新手。目前，我有一个render方法，它有一些JSX/HTML。我正在尝试使用CSS来更好地设计它，但是有一些关于代码的问题。
在CSS中，我让Buttons和Margin: auto;对容器NavBar中的元素进行居中，但是它不起作用。但是当我在text-align中使用.NavBar时，它就能工作了。为什么会这样呢？我认为它可以在按钮中工作，因为它将相对于其父容器-> NavBar进行居中。
2.在.NavBar中，例如，当我有高度20%时，它不会改变，除非我以像素为单位进行硬编码。因为NavBar是主Ap
浏览 0提问于2019-08-08得票数 2
1回答
我有一个没有固定高度的div元素，我想让它在父元素中垂直居中，而不考虑它的高度。我在现代浏览器中使用了display: table-cell技术，但是这种技术在IE7及更低版本中似乎不起作用。有什么方法可以在IE7及以下版本中使用纯CSS实现这种垂直居中的效果吗？提前谢谢。
浏览 2提问于2012-08-30得票数 1
我正在使用基础类库。我想在ReactJS中居中放置一个div，但我无法实现。
这是一个普通的工作示例：
<div class="vertical grid-block">
<div class="grid-block text-center"><span>Hi there !</span></div>
<div class="grid-block text-center">
<a class="button" href="#"&g
浏览 5提问于2015-07-21得票数 0
我正在尝试编写一个符合HTML5的文档，该文档将通过W3C验证器：。
验证器抱怨标签的每次使用，并建议我使用CSS。不幸的是，CSS似乎不能将块水平居中。它可以使用' text -align: center‘属性将文本居中，但尝试居中表格和图像会失败。
我在上读过"CSS居中指南“，但它的所有示例都不能水平居中表格或图像(至少在Firefox36.0上是这样)。谁能建议一下如何使这张桌子居中？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" co
浏览 1提问于2015-04-02得票数 2
我不确定我是否理解display: block的这个方面。
如果我有两个具有设置宽度的后续块元素，为元素留出足够的空间以便它们可以并排，那么它们看起来应该是并排的。但事情不是这样的。
body {
padding: 0;
margin: 0;
}
div {
height: 100px;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
display: block;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
浏览 3提问于2015-10-19得票数 0
回答已采纳
2回答
我是第一次使用HTML，需要帮助将当前导航栏居中：
它的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class=
浏览 2提问于2015-07-25得票数 1
有没有人知道有什么jQuery脚本会让div居中，当窗口调整大小时，它也会保持居中？我正在建立一个灯箱插件，我需要它留在中间。我试着使用CSS，但它不起作用。
此外，我需要它留在中间时，另一个盒子被打开，有更大的宽度和高度。这是包含示例的页面：
首先打开图像，然后打开div，您就会明白我的意思。div没有居中。但是，当您关闭并重新打开该div时，它会居中，因为单击WowBox链接时会发生.center()。我只需要它始终居中，而不是像那样搞得一团糟。
下面是我目前用来居中的代码：
jQuery.fn.center = function () {
this.css("pos
浏览 2提问于2011-07-22得票数 2
回答已采纳
1回答
我有一个像这样的div
<div id="question">
<h1 id="answer_no" class="question_element">NO</h1>
<div id="slider" class="question_element">
<input type="range" min="-1" max="1" value="0" step="
浏览 4提问于2015-03-18得票数 0
回答已采纳
1回答
垂直和水平对齐
、、、
我的问题如下：
我垂直居中了一个div。但是，我想将另一个div水平居中。问题是我没有设法使它水平居中。
(X)HTML：
<body>
<div id="strut"></div>
<div id="page">
<div id="inner_page">
<h1>Galidie "jQzz" Clément</h1>
</div>
</div>
CSS：
html, body {
m
浏览 3提问于2012-10-20得票数 2
回答已采纳
3回答
我有一个名为：
showModal(data);
当被调用时，它将使用传入的内容创建一个模式。我试着让它居中，但我不认为'this‘指的是正确的对象。
function showModal(data){
$("<div class = 'modal'>").css({
"z-index": Number($("#overlay1").css("z-index")) + 5,
top: $(window).height() / 2 - $(this).hei
浏览 0提问于2012-11-02得票数 1
回答已采纳
2回答
我试图在我的页面中居中一个div，但是我有一个非常特殊的布局，它不能让我用常规的页边距居中:汽车属性。我所拥有的，基本上是这样的：
HTML：
<div id="container">
<div id="sidebar">
some text
</div>
</div id="content">
some text
</div>
</div>
CSS：
#container{
margin: 0 auto
浏览 2提问于2010-10-20得票数 1
回答已采纳
1回答
我无法用嵌入的CSS在表中对Javascript添加的图像进行居中。请让我知道如何修复CSS，使在表中的图像是居中。我试着将边缘属性设置为图像的auto，但是表中的图像没有居中。
<html>
<head>
<title>Today's Events at the TRU Union</title>
<style>
p {text-align: center;}
table {display: block; margin: auto;}
body img{display:
浏览 0提问于2018-04-08得票数 0
回答已采纳
3回答
试着教自己CSS。我试图垂直居中文字，但在网上的例子都使用顶部:50%，这不适用于我。下面是css：
.mainSidebar {
display: inline-block;
margin-left: 5%;
margin-top: 2rem;
min-width: 25%;
height: 9rem;
background-color: rgb(97, 160, 108);
color: #fff;
浏览 0提问于2018-04-08得票数 1
回答已采纳
关于崩溃边距的声明：
建立新的块格式上下文的元素的边距(例如浮点数和除“可视”之外的“溢出”元素)不会与其流内子元素一起折叠。
我花了一段时间才意识到，块格式上下文是由父元素创建并应用于子元素的上下文，因此要想产生任何不同，必须在父元素(而不是子元素)上调整浮点或溢出属性。
在下面的代码片段中，相邻子div元素的边框高度折叠，因此任意两个子div元素之间的垂直间距为max(20 0px，20 0px) =20 0px，而不是20 0px+20 0px=40 0px，第一个子元素与父div之间以及最后一个子元素与父div之间的边框高度分别为max(20 0px，0px)=20 0px，而
浏览 1提问于2013-11-03得票数 3
2回答
我有以下HTML：
<div id="container">
<div id="header"><h1>Sed sollicitudin dignissim justo, sed.</h1></div>
</div>
和以下CSS：
div#container
{
text-align:left;
width:500px;
margin:0 auto;
}
这将创建一个跨整个屏幕的div container，并在第一个div header中创建另一个div c
浏览 1提问于2012-09-02得票数 1
回答已采纳
我有一个导航栏，其中的徽标和链接包含在同一个div (.header)。我让链接居中，但我似乎不能让图像在同一条线上，并与链接居中。我尝试了几种方法，但似乎什么都改变不了。提前谢谢。
.header {
width: 80%;
margin: 0 auto;
height: 4.375rem;
padding: 0 15px;
}
.header img {
width: 30px;
}
.links {
width: 50%;
margin: 0 auto;
padding: 0;
text-align: center;
line-height:
浏览 2提问于2015-09-25得票数 0
嗨，我希望设置一个居中的页脚，使用列表项目，在每个列表项目内无组织的列表。如果我尝试使用float:left，我会让它们彼此内联，但不再居中。我目前拥有的代码看起来像这样: css：
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
dis
浏览 6提问于2012-05-10得票数 0
2回答
我的css，这样我就可以得到浏览器的宽度和高度：
body, html {
margin:0;
padding:0;
line-height: 1.5em;
height: 100% !important;
width: 100% !important;
}
这就是我希望它的孩子们成为中心的东西：
<div style={{marginLeft: 'auto', marginRight: 'auto', width: 'inherit', height: 'inherit'}}>
浏览 26提问于2017-08-23得票数 0
如何让遮罩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
回答已采纳
我有一个asp.net中继器，在IE7中居中，但在FF中左对齐。我想让它左对齐。我注意到在css中，如果我删除：
body {
text-align:center;
}
中继器在IE中左对齐。问题是，实际上整个网站左移too...this是不好的。我不想重写整个网站。
我把中继器放在一个带有id="nav“的分区里。我为nav添加了一个css：
#nav {
text-align:left !important;
}
然而，中继器仍然居中。所以我试着：
#menuRepeater
{
float:left;
text-align:left !important
浏览 0提问于2010-11-18得票数 0
回答已采纳
2回答
W3 CSS :行内的中央卡
、、、、
我正在W3.CSS框架内工作，并试图对两张卡片进行居中，如下图所示。
当视口是大的或中型的时候，我希望这些卡片彼此相邻。在小的视口上，我想让他们把一个放在另一个上面。无论如何，尽管我尝试，我只是不能实现这个布局。我要么可以让卡片彼此相邻，但它们不会在行内居中，或者我让它们居中，但不管视口大小如何，它们都堆在一起。
下面是一些示例代码作为起点。
<div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
<div class="w3-car
浏览 2提问于2020-05-23得票数 0
回答已采纳
我在DIV里面有个图像。如果div的大小低于图像的大小，我希望图像缩小。但我也希望图像在DIV中居中。
这是我的HTML：
<div id="logo">
<img src="/images/logo_2016.jpg">
</div>
这是我的CSS
#logo img {
max-width:800px;
width: 100%;
}
这可以像我想要的那样调整图像的大小，但是图像不是以DIV为中心的。如果我试图用以下方式对图像进行居中：
#logo img {
marg
浏览 1提问于2016-05-02得票数 1
回答已采纳
2回答
到目前为止，我可以水平居中图像，但一旦我尝试垂直居中(添加上边距)，父div也会下移(这是我不想要的)。
这是我正在讨论的图片：
我认为最好的选择是将其设置为绝对位置，但我在水平居中时遇到了问题。
<div id="header">
<div id="container">
<div id="logo">
<a href="index.html"><img src="images/logo.png" />&l
浏览 0提问于2012-08-10得票数 1
回答已采纳
4回答
我知道这个问题已经问过很多次了，但是没有一个答案对我有用。我正在用HTML5和CSS3.0编写代码。我试图在一个页面中居中一个div标签，其中包含三个链接到其他图片的缩略图。我想让这些图片坐在一起，边距为0(这样它们就可以互相触摸)。下面是我的html代码：
<div id="main">
<h1>hello</h1>
<div id="gallery">
<a class="trigger" href="images/fulls/01.jpg"
浏览 2提问于2013-08-16得票数 1
回答已采纳
当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。
HTML：
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS：
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: le
浏览 3提问于2012-10-10得票数 4
回答已采纳
1回答
我遇到了一个真正让我困惑的问题。
我有一个容器，我想要在浏览器屏幕右上角的某个位置应用背景。其中的div的上边距为4em，这是在推送容器div。
CSS：
#container {
background: transparent url("../images/house-bg.png") top right no-repeat scroll;
}
#wrapper {
background: #FFF;
width: 960px;
height: 600px;
margin: 4em auto 0;
border: 10px solid
浏览 0提问于2010-05-29得票数 7
回答已采纳
我试图让#subwrapper和#submission_message并排出现，并使用#vert_center作为一种“轨迹”，将它们保持在一起，在页面上垂直居中。然而，#submission_message继续在#subwrapper下直接加载，就好像它清除了left或其他什么。帮助?
CSS：
#floater{
position:relative;
float: left;
height:50%;
margin-bottom: -155.5px;
width:1px;
}
#vert_center{
position: relative;
clea
浏览 2提问于2011-12-28得票数 0
回答已采纳
5回答
为什么放置在flex容器中的按钮通过使用margin : 0px auto;来居中，而放置在普通容器中的按钮却不是？
另外，我能做些什么来使按钮在普通容器中居中(我不能更改我的HTML，所以最好是CSS解决方案)。
.flex-container {
display: flex;
background: yellow;
}
.normal-container {
background: green;
}
button {
margin: 0px auto;
}
<div class="flex-container">
<button&g
浏览 14提问于2016-05-02得票数 2
回答已采纳
4回答
我找到了，但没能让它起作用。
我的CSS中有两个div容器标记为"box“，我无法让它们在父div中居中(在我的CSS中标记为”包装器“)。
这是我的代码：
CSS：
.wrapper {
display: inline-block;
margin: 0 auto;
}
.box {
display: inline-block;
width:370px;
height: 370px;
padding-left: 5px;
padding-right: 5px;
vertical-align: top;
}
任何帮助都将不胜感激！
浏览 5提问于2016-11-03得票数 1
回答已采纳
我尝试使用纯色将边框仅应用于div的左侧和右侧。当我查看页面时，其中的元素(设置为填充div宽度)在适当数量的像素上移动，但边框本身(纯色)似乎不存在，或者边框本身是透明的。我如何让纯色边框真正出现？下面是CSS片段：
#menu {
border-left: 10px solid #490707;
border-right: 10px solid #490707;
}
浏览 1提问于2013-06-08得票数 1
回答已采纳
1回答
我使用React，并使用display: table和display: table-cell将元素水平和垂直居中，并适当居中css。
在它里面我有一些内容，当我用javascript将内容添加到元素中时，整个元素正确地重新居中，但元素从它们的初始位置跳到它们的下一个位置。
我想在适当的地方让它动起来，可以吗？
从这个开始：
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
要这样做：
<div table>
浏览 1提问于2017-02-13得票数 0
几个小时以来，我一直试图让搜索栏的默认大小为500px，并随屏幕缩小，直到达到200px，同时保持居中。我希望它是移动友好的。几个小时以来，我一直在尝试不同的实现方法，但我不明白为什么它不起作用。
HTML：
<div class="container">
<div class="search-container">
<div class="search">
<form id="search-form">
浏览 2提问于2014-07-19得票数 0
3回答
我有一个div，里面有很多东西，我想要做的是在上面放一个图像，居中。我的基本布局如下所示：
<div>
<img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" />
<!-- a bunch of tables and stuff that doesn't have a conveniently
浏览 6提问于2012-03-14得票数 4
回答已采纳
2回答
我有两个硬币在对方下面。我希望他们都是水平的居中。问题是，我必须使用align: center作为#wrapper和margin: auto作为另一个。否则，其中只有一个是居中的。如果两者都使用align-center，则只有#包装器是居中的，如果两者都使用margin: auto，则只有第二个包装器居中。
为什么我必须使用两个不同的属性在中间对齐它们？：
HTML：
<div class="col-sm-5 col-sm-offset-3" id="wrapper">
<div class="row">
浏览 2提问于2016-07-12得票数 1
2回答
假设我有一行全部大写的文本(例如text-transform: uppercase)。我想让这个文本在div中垂直居中。我不需要担心多行文本。
有几种方法可以在CSS中垂直居中(例如，check out)。不幸的是，所有这些方法都考虑到了，并且我的文本没有任何下行体，所以它不能完美地居中。基本上，我希望将文本的一部分从基线居中到大写高度。
有没有办法使一行大写文本垂直居中？现在我正在使用position: relative并手动调整它，直到它居中(例如使用top: 2px)，但这显然不是一个健壮的解决方案(它非常依赖于浏览器呈现文本的方式，可用的字体等)。谢谢!
浏览 4提问于2013-04-29得票数 6
回答已采纳
好的，我有一些弹出式气泡效果，带有绝对定位和隐藏的子元素，称为div.caption。div.caption有一个名为a.logo的父元素。
我想从a.logo中减去div.caption的高度，并将.css("top",..)设置为该数字的一半。
例如：
a.logo = 200px (高) div.caption - 250px (高)
-( (250 - 200)/2 )= -25
结果应该是子对象相对于父对象的垂直居中(尽管它溢出了父对象。
我有以下HTML
<a class="logo" href="#">
<di
浏览 0提问于2011-11-01得票数 1
5回答
我在一个<table>里面有一个<div>，下面的样式，表没有居中，为什么？
<div>中的所有内容不都应该像我在CSS中的样式那样格式化吗？
HTML
<div>
<table></table>
</div>
CSS
div{
border: 5px solid white;
border-radius: 5px;
margin: auto;
text-align: center;
}
浏览 5提问于2016-07-10得票数 12
回答已采纳
2回答
我的html页面是：
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
我的css文件是：
html, body{
浏览 5提问于2011-12-10得票数 1
回答已采纳
假设您有以下代码块：
<div id="container">
<someelement>This is any element.</someelement>
</div>
什么是最好的CSS，我可以使用水平居中的“某一元素”在其包含的div？
浏览 4提问于2008-12-27得票数 5
回答已采纳
4回答
我正在寻找一种方法，以居中的div水平在页面上的谷歌浏览器。
我试过使用margin: auto；但是我读到Google Chrome不支持这个功能。因此，我的div保持与屏幕的左侧对齐。
例如，如果我使用的是margin left: 100px；div确实会移到页面的中心，但我不想手动将其居中。
HTML：
<body>
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</b
浏览 3提问于2013-03-26得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
