如何在另一个div内将div居中放置

Question

I'm working in a project and I have this 我在一个项目中工作，我有这个

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

Now I'm working in the menu bar and I want to put the <p> home in the center of the menu div 现在我正在菜单栏中工作，我想将<p>主页放在菜单div的中心

When I put margin-top: 10px to centre the home button it moves all the menu div 当我将margin-top: 10px放置在home按钮的中心时，它将所有菜单div移动

I have this css: 我有这个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;
}

What can I do? 我能做什么？

Answer 1

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

Answer 2

use position relative and absolute concept 使用位置相对和绝对概念

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

now if you change css of home its doesn't effect all element 现在，如果您更改home的CSS，它不会影响所有元素

fore more see http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ 有关更多信息，请参见http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 3

Try this 尝试这个

 <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

add float property float:left; 添加float属性float:left;

Try this code: 试试这个代码：

DEMO DEMO

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

Answer 5

If you want to make vertical center then simple adjust the line-height for menu to 50px that make text inside menu vertical-align middle. 如果要使垂直居中，则只需将菜单的行高调整为50px，使菜单内的文本垂直居中。

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

如何在另一个div内将div居中放置

问题描述

5 个解决方案

解决方案1
1 已采纳 2014-02-26 12:56:21

解决方案2
0 2014-02-26 12:55:37

解决方案3
0 2014-02-26 12:56:52

解决方案4
0 2014-02-26 12:59:51

解决方案5
0 2014-02-26 13:20:45

如何在另一个div内将div居中放置

问题描述

5 个解决方案

解决方案1 1 已采纳 2014-02-26 12:56:21

解决方案2 0 2014-02-26 12:55:37

解决方案3 0 2014-02-26 12:56:52

解决方案4 0 2014-02-26 12:59:51

解决方案5 0 2014-02-26 13:20:45

解决方案1
1 已采纳 2014-02-26 12:56:21

解决方案2
0 2014-02-26 12:55:37

解决方案3
0 2014-02-26 12:56:52

解决方案4
0 2014-02-26 12:59:51

解决方案5
0 2014-02-26 13:20:45