Question

我在一个项目中工作，我有这个

<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;
}

我该怎么办？

Answer 1

在padding-top上使用.menu代替margin-top而不是.home。

Answer 2

使用位置相对和绝对概念

.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/

Answer 3

试试这个

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

Answer 4

添加浮动属性float:left;

试试这段代码：

<强> DEMO

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

Answer 5

如果你想制作垂直中心，那么简单地将菜单的行高调整为50px，使菜单内的文字垂直对齐。

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

我怎样才能将div放在另一个div内的div中心

5 个答案: