HTML/CSS3-对齐文本问题_Html_Css_Text_Alignment

HTML/CSS3-对齐文本问题

html css text

HTML/CSS3-对齐文本问题,html,css,text,alignment,Html,Css,Text,Alignment,我试图将文本对齐到中间位置，但元素有一些问题，我无法理解原因 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte

我试图将文本对齐到中间位置，但

元素有一些问题，我无法理解原因

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Termoidraulica</title>
    <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/commons.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
.cover {    
    position: relative;
    width: 95%;
    height: 400px;
    margin: 0 auto;
    background-color: #333;
}
.cover-caption {
    position: relative;
    text-align: center;
    left: 50%;
    top: 50%;   
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
    </style>
</head>
<body>
    <section class="cover">
        <div class="cover-caption">
            <h1 class="cover-title">TITLE</h1>
            <p class="cover-subtitle">Subtitle</p>
            <button class="cover-btn">SHOP NOW!</button>
        </div>
    </section>    
</body>
</html>


白蚁
.封面{
位置：相对位置；
宽度：95%；
高度：400px；
保证金：0自动；
背景色：#333；
}
.封面说明{
位置：相对位置；
文本对齐：居中；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
标题
字幕
现在就去购物！

如果这里太混乱，我已经在codepen上粘贴了我所有的代码

提前谢谢

通过

问题来自您指定高度为40px的导航栏元素。因此，您可以删除此值以使其自动或添加

溢出：隐藏

（这将解决实际代码的问题）

顺便说一句，您在

.navbar

中有float元素

.navbar菜单

，由于您没有正确清除float，因此产生了问题。还可以考虑在包含标题的部分之前添加<代码> <代码>，而不是将代码> CyFix< /Cuff>类添加到上一个容器。

以下是完整的代码：

正文{
背景色：#eee；
保证金：0；
填充：0；
颜色：#eee；
}
a{
文字装饰：无；
}
navbar先生{
背景色：#eee；
高度：40px；
}
.导航栏标志{
颜色：#409be8；
浮动：左；
显示：块；
填充：0.7em 0.2.5%；
字号：1.5em；
}
.导航栏菜单{
浮动：对；
保证金：0；
填充：0 2.5%0 0；
}
.导航栏菜单项{
显示：内联块；
}
.导航栏菜单项a{
显示：块；
填充：0.1em；
颜色：#409be8；
线高：60px；
字号：18px；
-webkit过渡：背景色0.5s线性；
过渡：背景色0.5s线性；
}
.navbar菜单项a：悬停{
背景色：#409be8；
颜色：#eee；
}
.导航栏菜单图标{
显示：无；
浮动：对；
填充：1.2em 1.2em 0；
}
.navbar菜单图标跨度{
显示：块；
高度：3倍；
宽度：30px；
背景色：#409be8；
边缘底部：5px；
}
.制作动画{
-webkit过渡：所有0.5s都可以轻松过渡；
过渡：所有0.5s缓解；
}
.clearfix{
明确：两者皆有；
}
.掩护{
位置：相对位置；
宽度：95%；
高度：400px；
保证金：0自动；
背景色：#333；
}
.封面说明{
位置：相对位置；
文本对齐：居中；
}
.封面标题{
字体系列：“Berkshire Swash”，草书；
}











标题
字幕
现在就去购物！

你的

清除：两个都来自。clearfix:after
在第一个
中没有生效-我以前从未尝试过在:after
中清除，也不知道它是否有效，但在这里显然不起作用
在我的实验中，Easist修复方法是将clear:two
添加到
中，其中包含行为不端的
@TemaniAfif，如果不幸的是，我在我的IDE上发现了相同的问题。我只在CodePen上复制和粘贴了HTML/CSS代码。没有变换，我不知道如何垂直和水平地表达谢意！！但是为什么导航栏的高度会产生这个问题？@mikealfavro您没有正确清除浮动元素；）谢谢代码：D，但现在我有另一个问题…在导航栏和封面之间有一些空间，但我不明白为什么。。我没有空白、空白或其他任何东西。（是的，我是新手）@MikeAlFaverFavro啊，不，你有h1的余量，这是collpasing，去掉它很好！！是的，现在一切都好了：D非常感谢都德：D