Question

我在div中有一个带有p标签和h2标签的标头。

问题是当我尝试对齐标题左侧的p标签时，中间的h2标签向右移动

正如你所看到的那样＃34; Title＆＃34;不是按钮的中心。

HTML：

  <div class="header">
        <p class="headerp">Name</p>
        <h2 class="logo">Title</h2>


    </div>

CSS：

＆＃13;

body {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    background-color: #dcecf1;
    margin: 0px;
    padding: 0px;
}

.header {

    overflow: hidden;
    background-color: #292929;
    padding: 20px;
    margin-bottom: 40px;
    margin-left: 0px;
    -webkit-box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);
    -moz-box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);
    box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);

}


.header h2 {
    display:inline;
    color: #d4d4d4;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 20px;
    line-height: 25px;
    border-radius: 4px;
}

.header h2.logo {
    font-size: 50px;font-weight: bold;
    padding:30px 30px 30px;
    margin:auto;
    text-align:center;

}




.headerp{

    font-family: 'Poly' Serif;
    color: #d3d3d3;
    margin: 0 auto;
    display:inline-block;
    float:left;

＆＃13;

<body>
    <div class="header">
        <p class="headerp">Name</p>
        <h2 class="logo">Title</h2>


    </div>
    
    
    <button>Button</button>
    
</body>

＆＃13;

Answer 1

这有效......

＆＃13;

body {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    background-color: #dcecf1;
    margin: 0px;
    padding: 0px;
}

.header {

    overflow: hidden;
    background-color: #292929;
    padding: 20px;
    margin-bottom: 40px;
    margin-left: 0px;
    -webkit-box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);
    -moz-box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);
    box-shadow: 3px 10px 23px -9px rgba(0,0,0,0.67);

}

.header h2 {
    display:inline;
    color: #d4d4d4;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 20px;
    line-height: 25px;
    border-radius: 4px;
}

.header h2.logo {
    font-size: 50px;
    font-weight: bold;
    margin:auto;
    text-align: center;
    position: absolute;
    left: 0; right: 0;
    padding: 0;
}




.headerp{

    font-family: 'Poly' Serif;
    color: #d3d3d3;
    margin: 0 auto;
    float:left;
}

＆＃13;

<body>
    <div class="header">
        <p class="headerp">Name</p>
        <h2 class="logo">Title</h2>
    </div>
    
    
    <button>Button</button>
</body>

＆＃13;

还有一个轻微的问题＆＃34;

.headerp{

    font-family: 'Poly' Serif;
    color: #d3d3d3;
    margin: 0 auto;
    display:inline-block;
    float:left;
}

由于浮动，忽略了内联块。如果＆＃39;浮动＆＃39;如果没有＆＃39; none＆＃39;，则该框浮动并显示＆＃39;被视为＆＃39;阻止＆＃39;

.header h2.logo发生了变化

left: 0; right: 0; - 以中心为中心

position: absolute; - 元素相对于其第一个定位（非静态）祖先元素（来自w3schools）定位

padding: 0; - 存在填充问题，因此删除填充修复了它。如果您想查看问题所在，请删除此行。

P标签和H2标签在同一div内联

1 个答案: