个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
28
4
我有以下 html5 正文:
<body>
<div id="container">
<div class="content" id="topleft">topleft</div>
<div class="content" id="topcenter">topcenter</div>
<div class="content" id="topright">topright</div>
<div class="content" id="centerleft">centerleft</div>
<div class="content" id="centercenter">centercenter</div>
<div class="content" id="centerright">centerright</div>
<div class="content" id="bottomleft">bottomleft</div>
<div class="content" id="bottomcenter">bottomcenter</div>
<div class="content" id="bottomright">bottomright</div>
</div>
</body>
我想实现一个看起来像这样的动态布局:
每个内容元素都应该布置(停靠)在相对于其父容器的 Angular 落，并且所有中心元素都应该在各自的边上居中。父容器的大小或位置无关紧要，因此我不能使用绝对像素坐标进行定位。
这是我目前所拥有的:
div#container {
background: lightblue;
position: relative;
width: 500px;
height: 500px;
}
div.content
{
width: 100px;
height: 100px;
position: absolute;
background: lightyellow;
text-align: center;
margin: auto;
}
div#topleft {
}
div#topcenter {
right: 50%; /*obviously doesn't center*/
}
div#topright {
right: 0px;
}
div#centerleft {
top: 50%; /*obviously doesn't center*/
left: 0px;
}
div#centercenter {
top: 50%; /*obviously doesn't center*/
right: 50%; /*obviously doesn't center*/
}
div#centerright {
right: 0px;
top: 50%; /*obviously doesn't center*/
}
div#bottomleft {
bottom: 0px;
}
div#bottomcenter {
bottom: 0px;
right: 50%; /*obviously doesn't center*/
}
div#bottomright {
right: 0px;
bottom: 0px;
}
这一切都适用于 Angular 落，但当然所有中心元素都没有居中对齐，我明白为什么。我只是不知道，这在 CSS3 中是如何完成的...
最佳答案
要在其父元素中垂直居中固定高度的元素，请使用:
top:50%;
margin-top:-50px;
对于水平方向，你可以对 left 和 margin-left 做同样的事情，或者只是不定义任何东西并使用“margin:0 auto”，因为它会自动将它们左右均匀地填充。
关于html - 将子元素停靠在父元素的所有 Angular 落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15981622/
28
4
0
我想知道如何使用css动画使圆形div元素到达页面的每个 Angular 落。我试图这样做无济于事。 相当基本的问题，但它会帮助我理解。 CSS 201 .box { wi
使用translate(width/2,height/2)旋转自定义形状时；旋转( Angular ))，它会移动左下角的形状。我尝试将翻译值设置为负值，它修复了它，但原点位于 0,0 。我用过pop
嘿，我是新手，如果有任何明显的错误，请原谅我，谢谢 :) 因此，每当您开始滚动时，我都需要一个图像从屏幕中间移动到屏幕的一 Angular 。我能够做到这一点。唯一的问题是，当我滚动回顶部时，图像不会
我目前的网站是用 WordPress 制作的，我的主题是基于二十一(默认主题)，我只是修改它以满足我的要求。但我有一个主要问题。 容器 的 Angular 不会变圆。这是 style.css这是一个l
我正在寻找一种方法来绝对定位以下 css 样式中使用的四个 Angular 。我尝试了以下方法，但那不是正确的方法。 .rbottom{display:block; background:#f57f2
我有一个高度跨越 2 行的 div。但我想将以下 div 放入左下角和右下角: http://jsfiddle.net/netnet/NNH6V/浏览前，请将拆分器向左拖动，您会看到复选框2和“222
我试图将一个元素定位在其父元素的右下角。目前，您可以看到它位于中心，但触及底部: http://jsfiddle.net/03r7gabp/ 理想情况下，我希望它触及底部，一直向右冲洗(right:
我正在尝试像这样扭曲我的菜单项: 我找到了一些可以让我倾斜所有 4 个 Angular 的解决方案，但它们使用的是边框顶部解决方案，而由于渐变，我需要使用背景图像解决方案。 有人知道怎么做吗？ 最佳答
我想在 CSS 中实现这个，对所有屏幕尺寸都有效: 从屏幕的左侧到中间背景应该是蓝色的，从中上到右下角的背景应该是白色的。这是我已经得到的: .wrapper { position: fix
我想把 div 的边 Angular 弯成弓形! 我试过 border-radius 但它对 Angular 的形状太大了。是否有任何 css3 属性来实现结果？ 这就是我现在得到的 这就是我想要的样
我想使用 CSS 去除图像的 Angular 。我目前通过调整图像来实现这一点，但我更愿意学习如何正确地做到这一点。 这是我想要实现的图像购物页面。这个想法是使用完整的图像和 CSS 来剪掉 Angu
我有以下 html5 正文: topleft topcenter topright centerleft c
我已经创建了一个 View ，我正在尝试用圆 Angular 制作它，所以我使用了 border-radius。 唯一的问题是我可以看到其中一个 div 元素的 Angular ，但我似乎无法摆脱它们
我有一个模板照片可以为它创建 HTML。 问题在图像中用箭头标记。 slider 下方有一个部分有一个 flex 的边框(浅蓝色)，我试图用 border-radius 属性来实现它，我围绕它做了很多
现在我有如下安排: 我希望这些树适合正方形的上 Angular (每棵树都在对 Angular 线顶点，就像形成一个外部正方形) 我的 HTML:
我有一个我在 Photoshop 中制作的简单圆 Angular 矩形的 png。我想要显示整个矩形，但是在图像的右上角、右下角和左下角有一点裁剪，使其成为正方形。左上角是 4 个 Angular 中
我有一张传单 map ，它只呈现在一个 Angular 落里。当我调整浏览器窗口大小时，整个 map 都会呈现。 这就是我调用 map 的方式 var map = L.map('map', { crs
这是一个fiddle 我尝试圆化 tbody 元素的 Angular 没有成功。 我能够使用以下代码将 tbody 中的 tr 元素的 Angular 圆化 CSS .tr .rounded-corn
这个问题已经有了答案： CSS - show only corner border 15答 角边框效果 似乎找不到任何关于如何使用css实现此效果的帮助。 最佳答案 我认为你也可以通过使用像photo
这是我在 html 中生成标记和信息窗口的代码(使用 ruby on rails) var marker=[] function initMap() { var latLng1
我是一名优秀的程序员,十分优秀！