相关疑难解决方法(0)
如何垂直居中div？
我div想要水平和垂直居中.
对于横向问题,一切都很好,但我有垂直对齐的问题.
我试过这个:
#parent {
display: table;
}
#child {
display: table-row;
vertical-align: middle;
}
但这不起作用.
推荐指数
解决办法
查看次数
使用Flexbox和溢出来居中项目
问题摘要
我想要的布局是能够在页面上(纵向和横向)居中显示未知大小的图像.如果图像太大而无法适合任何一个方向,我想显示滚动条,以便用户可以滚动查看完整图像.我遇到的问题是,当图像太大而不适合时,图像的顶部和左侧(取决于截断的部分)将永远无法滚动到.
试图解决方案
我试图使用flexbox来实现所需的布局,但Flexbox不是必需的.这是一个重现问题的小例子(请注意,我没有在CSS中添加任何浏览器前缀,因此您需要在Chrome中查看此内容[或者也可以在Firefox中查看？]):
.body {
height: 600px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
img {
border: 5px solid black;
}<div class="body">
<div class="container">
<img src="http://placehold.it/700x700" />
</div>
</div>您应该能够完全看到图像周围的边框,但是当窗口缩小时,图像的左侧和/或顶部会被切断.随着窗口继续缩小,越来越多的图像将变得不可见.
请注意,如果那里有图像似乎并不重要.这是一个片段,只使用普通的div来显示问题:
.body {
height: 600px;
margin-top: 80px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
.content {
border: 5px solid black;
width: 600px; …推荐指数
解决办法
查看次数
如何通过绝对位置使Modal位于屏幕中心？
我为我的框架创建了一个Modal.我创建了一些像HTML代码,CSS代码和JS代码......,它非常好用!
我唯一的问题是我不能让它成为中心和响应...这是我的Modal Div的CSS代码:
.ji-modal {
width: 700px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
position: fixed;
top: 70px;
left: 325px;
display: none;
z-index: 1000005;
}
我已经读过如果你的宽度是固定的并且你的标签有一个绝对或固定位置,你可以通过给左边50%给它中心,但是它也不起作用......
任何帮助,谢谢......
推荐指数
解决办法
查看次数
垂直和水平将div放在另一个内部
我试图将div放在另一个div中.我尝试了以下HTML和CSS
HTML
<div class="header">
<div class="homeImageText">
<h1>Document Preparation Like Never Before</h1>
</div><!--homeImagetext end-->
</div>
CSS
.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}
header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
推荐指数
解决办法
查看次数
div中垂直对齐,高度为100%
这是我的情况:我正在尝试制作一个包含两个DIVsfilling整页的页面(高度100%,每个宽度50%).此外,DIV中的内容将垂直对齐到中间.
有没有一个简单的方法来实现这个没有黑客或JavaScript？
我试过了 body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
但这不起作用......并且使用该代码,我必须指定宽度(以像素为单位)而不是百分比
推荐指数
解决办法
查看次数
css:如何将box div元素直接置于中心？
当我使用top:50%并且离开:50%
盒子不是直接在中心.当然,当盒子非常小时,它似乎是居中的.但是当盒子有点大时,它看起来好像没有居中.
我怎么解决这个问题？
推荐指数
解决办法
查看次数
使用CSS网格的垂直和水平居中的4x4方形网格
我想使用 div 和 css-grid 编写 2048 游戏。这就是我想象的输出：
我有适合浏览器窗口的外部部分，我只想在中左 div （称为 ）的中间（水平和垂直）写入 4x4 网game-container格
<div class = "game-container">
<div class = "game">
<div class = "game-cell"></div>
<!-- 16 game cells total -->
<div class = "game-cell"></div>
</div>
</div>
我使用以下方法制作了 4x4 网格：
div.game {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
但是，我有一些问题：
- 如何制作每个
game-cell正方形（假设为 50px） - 如何在a的中间显示一个数字
game-cell - 如何让div相互接触
我可以每一项都做，但不能一次全部做。
另外，如何game在div的中间显示div（如图）game-container。
附言。如果它可以简化某些事情，我不介意使用一些 Bootstrap。
有关外容器的一些信息：
html, body, div.container{
height: 100%;
margin: 0;
padding: 0;
} …推荐指数
解决办法
查看次数
水平和垂直居中网站
浏览http://www.eveo.org
下载网站以便于修改:
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip
正如您现在所看到的,它使用简单的表格方法水平和垂直居中:
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
*put anything in here and it will be aligned horizontally and vertically
</td>
</tr>
</table>
accompanying CSS:
table
{
height: 100%;
width: 100%;
vertical-align: middle;
}
但是,在我的文档中我没有设置doctype,我只有:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
如果我添加标准文档类型,如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
我的表方法不再有效,不起作用.因此,无论浏览器窗口大小如何,我都需要一种新的方式来纵向和横向居中我的网页.
推荐指数
解决办法
查看次数
旋转 div，绝对定位和响应能力
我正在尝试编写我之前在 photoshop 中制作的设计，但我觉得我没有以“正确”的方式做事，应该有另一种更好的方式来实现我想要的。
为了旋转 div 并保持它与 100% 宽度 a href 属性的链接，我使用了转换。但是这样一来，get 里面的所有东西也都变成了 45 度。有没有更好的方法来实现它？因为我想稍后添加 Jquery，而且不必旋转我在这些 div 中添加的每一个小东西会很好。
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
我真的希望网站能够响应，但由于某种原因，高度不想与其他百分比一起加入。例如，我希望 div#midden 为高度的 24%，但保持正方形。我无法弄清楚如何做到这一点。 http://jsfiddle.net/AeFcY/1/
最后，定位。我希望整个事情都在页面的中心，但我想出的唯一方法是使用边距：0 自动和绝对定位。但是，这给将 div 彼此相邻定位带来了一项艰巨的工作......现在我已经通过将 'right' 属性从 855px 更改为 -855px 来定位它们。
HTML代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>imandragrafie</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="links" class="zijden draai"><a href="#"></a></div>
<div id="midden" class="draai"><a href="#"></a></div>
<div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>
</body>
</html>
CSS：
html, …推荐指数
解决办法
查看次数
Bootstrap 5 中垂直居中的 div
如何在 Bootstrap 5 中垂直居中？\n它应该在和屏幕结束div之前的内容之间的中间对齐。div
尝试过这个：
\n <div>some content</div>\n <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">\n <div>div that should be centered</div>\n </div>\n它使页面比实际长度长。div\xc2\xb4t 看起来不居中。
\n推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×6
css3 ×2
bootstrap-5 ×1
centering ×1
css-grid ×1
flexbox ×1
html5 ×1
modal-dialog ×1
position ×1