Question

我想在anathor div中对齐div但是无法沿着div垂直移动div（class name = circleIcon），因为我试图通过margin-top调整它，它正在移动父div＆＃34; div2Main＆＃34 ;.我想将circleIcon div 6px与父Div＆＃34; div2Main。

对齐

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" type="text/css" href="Screen1.css">
</head>
<body>
<div id="header1Main">
<div id="header1">Composite Timeline</div>
<div id="header2"><img src="images/drop-down-arrow.png"></img></div>
</div>
<div class="clear"></div>
<div class="div2Main">
   <div class="circleIcon"> </div>

</div>
<div></div>
</body>
</html>

CSS：

@import url(http://fonts.googleapis.com/css?family=Roboto);
#header1Main
{

}
#header1 {
    display:inline-block;
    font-family: Roboto;
    font-size: 12px;
    height: 36px;   
    background-color:green;
    left: 0;
    width:70%;
    margin-left: 18px;
    vertical-align: middle;
    line-height: 36px;
    float: left;
}

#header2 
{
    display:inline-block;
    margin-right:20%;
    right:0px;
    float:right;
    margin-right: 14px;
    background-color:blue;
    vertical-align: middle;
    line-height: 36px;
}

.div2Main
{   clear:both;
    display:inline-block;
    display:block;
    background-color: aqua;
    margin-left:12px;
    height:64px;
}
.clear { clear:both; height: 12px; }

.circleIcon {
    width: 28px;
    height: 28px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px; 
    background-color:#ffb400;
    margin-left: 12px;
}

小提琴：

http://jsfiddle.net/tvaibhav/678n2837/1/

Answer 1

试试这个css.Check这个小提琴链接fiddle link

.circleIcon {
    width: 28px;
    height: 28px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px; 
    background-color:#ffb400;
    margin-left: 12px;
    position:relative;
    top:10px;
}

Answer 2

试试这个css（只是改变）：

.div2Main
{
    position: relative;
}

.circleIcon {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -14px;
    margin-right: -14px;
}

它将.circleIcon绝对置于父.div2Main内。即使.div2Main改变其宽度或高度，它也能正常工作。

jsfiddle

Answer 3

嗨现在定义到这个

.div2Main{
 overflow:hidden;
}

.circleIcon {
  margin-top:10px; // define here as per need
}

<强> Demo

CSS溢出属性

溢出属性有四个值：可见（默认），隐藏，滚动和自动。还有姐妹属性overflow-y和overflow-x，它们的使用不太广泛。

more info

<强> What purpose does overflow: hidden; serve

如何调整div内的div

3 个答案: