我怎麼可以在另一個DIV

我在一個項目裏面工作的頂部和BUTTOM中心一個div，我有這個我怎麼可以在另一個DIV

<html> 
<head> 
    <title><?php $title; ?></title> 
    <link rel="stylesheet" type="text/css" href="recursos/css/main.css"> 
    <link rel="stylesheet" type="text/css" href="recursos/css/menu.css"> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script> 
    <script type="text/javascript" src="js/menu.js"></script> 



</head> 
<body> 
    <header class="centrado"> 
     <div class="loginregister"></div> 
     <div class="espacio"></div> 
     <div class="menu"> 
      <p class="home">Home</p> 
     </div> 
     <hr> 
    </header>

現在我在菜單欄中我的工作，我想把<p>家在菜單的div

中心當我把margin-top: 10px居中的主頁按鈕它移動所有的菜單DIV

我有這樣的CSS：

body { 
    background-image: url('../../img/madera.jpg'); 
} 

.centrado { 
    height: 100%; 
    width: 80%; 
    background-color: red; 
    margin: 0 auto; 
} 

.menu { 
    height: 50px; 
    width: auto; 
    background-color: blue; 
    border-radius: 15px; 
} 

.espacio { 
    height: 10px; 
} 

.home { 
    text-align: center; 
    background-color: yellow; 
    width: 60px; 
    margin-top: 10px; 
    border-radius: 15px; 
}

我該怎麼辦？

來源

2014-02-26 Ninjacu

使用padding-top上.menu而不是.home上的margin-top。

來源

2014-02-26 12:56:21 pstenstrm

Okey這是我要感謝它完美的作品！ – Ninjacu

使用位置相對和絕對概念

.menu { 
    height: 50px; 
    width: auto; 
    background-color: blue; 
    border-radius: 15px; 
    position:absolute;//it make parent 
} 

.home { 
    text-align: center; 
    background-color: yellow; 
    width: 60px; 
    margin-top: 10px; 
    border-radius: 15px; 
    position:relative;// it make child now 
}

現在如果你改變家的CSS其不會影響所有元素

前更見http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

來源

2014-02-26 12:55:37

試試這個

<header class="centrado"> 
     <div class="loginregister"></div> 
     <div class="espacio"></div> 
     <div class="menu"> 
      <center> 
      <p class="home">Home</p> 
      </center>  
     </div> 
     <hr> 
    </header>

來源

2014-02-26 12:56:52

附加float屬性float:left;

試試這個代碼：

DEMO

.home { 
    text-align: center; 
    background-color: yellow; 
    width: 60px; 
    margin-top: 15px; 
    border-radius: 15px; 
    float:left; 
}

來源

2014-02-26 12:59:51 Manoj

如果你想使垂直中心，然後一個簡單調整菜單的行高爲50px，使菜單內的文本垂直居中對齊。

.menu { 
    height: 50px; 
    line-height:50px; 
    width: auto; 
    background-color: blue; 
    border-radius: 15px; 
}

來源

2014-02-26 13:20:45

我怎麼可以在另一個DIV

回答

相關問題