相关疑难解决方法(0)
为什么"position:absolute; left:0; right:0; width:XYpx; margin:0 auto"实际上是中心？
我在CSS方面非常精通,但今天我偶然发现了一个令我头疼的片段(这里和这里).
我从来不认为我们可以通过中心绝对定位的元素margin: 0 auto,但鉴于问题的元素有一组宽度,还有的left: 0和right: 0,它实际上似乎工作:
#parent
{
background: #999;
height: 300px;
position: relative;
width: 300px;
}
#child
{
background: #333;
height: 50px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
width: 50px;
}<div id="parent">
<div id="child"></div>
</div>(JSFiddle)
我一直以为left: 0和right: 0将决定元素的宽度(它100%的第一个相对定位的父),但似乎width这里的优先级,因此使得margin: 0 auto工作.
这是定义的行为吗？我可以在任何规格中找到它的相关信息吗？我google了一下,但没有任何用处.
推荐指数
解决办法
查看次数
将div与页面中心对齐,而其位置是绝对的？
我怎么能align一个DIV到我的网页的中心,而它position是absolute？如果可能的话,不使用javascript.
推荐指数
解决办法
查看次数
无法在firefox中居中
所以我有这两张桌子
<table id="pointsTable" >
<th> One </th>
<th> Two </th>
<th> Three </th>
<tr>
<td id="one" ></td>
<td id="two"></td>
<td id="three"></td>
</tr>
</table>
<table id="pointsTableSmall" style="text-align: center;">
<tr>
<th> One </th>
</tr>
<tr>
<td id="one"></td>
</tr>
<tr>
<th>Two </th>
</tr>
<tr>
<td id="two" ></td>
</tr>
<tr>
<th>Three</th>
</tr>
<tr>
<td id="three" ></td>
</tr>
</table>
第一个在大屏幕中可见,第二个在较小的屏幕中可见.
他们的CSS是
#pointsTable, #pointsTableSmall{
border: 0;
border-style: 0;
margin: auto !important;
padding: auto;
text-align: center !important;
}
他们的包裹div有
#pointWrap{
text-align: center;
}
在Firefox 45.0.1中,表格左对齐,边距为:auto且无填充.左侧对齐间隙与其容器之间的右侧有间隙div. …
推荐指数
解决办法
查看次数
绝对位置和保证金:自动
我有一个小问题,我希望我的页脚留在屏幕的底部position: absolute.但我margin: auto把它放在屏幕中间不再工作了.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<a href="index.php"><div class="link">Home</div></a>
<a href="wie.php"><div class="link">Wie is wie</div></a>
<a href="fotos.php"><div class="link">Foto's</div></a>
<a href="repertoire.php"><div class="link">Repertoire</div></a>
<a href="links.php"><div class="link">Links</div></a>
<a href="contact.php"><div class="link">Contact</div></a>
</div>
</div>
<div class="clear"></div>
<div …推荐指数
解决办法
查看次数
将绝对定位元素水平居中于另一个元素的中心下方
如何将绝对定位元素置于另一个元素中心下方的中心？
用法示例:单击时打开/显示新(绝对定位)元素的日期选择器.
. <-- Center
[ . ] <-- Not absolutely positioned element, a button. Always displayed
[ . ] <-- Absolutely positioned element. Visibility toggled by button
编辑:为了说清楚,我正在寻找的是一种简单的方法,使元素的中心对齐.
推荐指数
解决办法
查看次数
text-align:center在绝对定位跨度上不能正常工作
我需要将2 <span>放在a内<div>,第一个跨度必须放在顶部,第二个跨度放在底部,如南北.
<div>
<span class="north">N</span>
<span class="south">S</span>
</div>
为此,我考虑使用position:absolute;2 <span>.
div
{
display:inline-block;
width: 20px;
position:relative;
height:100px;
}
.north
{
position:absolute;
top:0;
}
.south
{
position:absolute;
bottom:0;
}
现在,跨度应该位于左侧(默认),以使它们居中,我使用:
div
{
text-align:center;
}
但我得到了这个:
为什么会发生这种情况？
注意:我不能使用左,右边距,因为这些跨距的内容不同,我只需要在中心正确对齐它们.
推荐指数
解决办法
查看次数
CSS:保证金权利和绝对定位
我在页面中有一个div.现在,当我将其位置指定为绝对位置并给出margin-left == 20px时:
我明白那个.div元素应该向右移动20 px,这样你就可以在div和body之间存在20px的边距.
现在,当我从右侧提供20px的边距时,不应该整个div向右侧移动,与身体的间隙为20px.
.container{
position: absolute;
background-color:gray;
margin-right: 50px;
height: 200px;
}
我知道我可以定位div给出左右两个值.但真正的问题是保证金留下工作但保证金权利不行!这是什么原因？帮助赞赏!
推荐指数
解决办法
查看次数