Question

非常快速的问题，我已经研究了这个并尝试查找解决方案，但没有运气。我在div中垂直对齐两个文本，但div中的文本总是在它的容器之外，我不知道为什么。

我附上了两张图片。第一个链接是问题，第二个链接是我想要的样子。

谢谢！ CSS

body {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: sans-serif;
}

.homepage-window {
    height: 100vh;
    display: flex;
}

.nav-bar {
    width: 18%;
    background-color: #2E3E4E;
}

.bar-manager {
    width: 100%;
}

.top-bar {
    display: flex;
    align-items: center;
    height: 7%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.top-bar p {
    margin-left: 10px;
    font-weight: lighter;
}

.bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 9%;
    width: 100%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.bottom-bar h1 {
    margin-left: 10px;
    font-weight: normal;
    font-size: 12px;
}

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
    <title>Cold-Ops Homepage</title>
</head>
<body>
    <div class="homepage-window">
        <div class="nav-bar">   
        </div>
        <div class="bar-manager">
            <div class="top-bar">
                <p>Homepage</p>
            </div>
            <div class="bottom-bar">
                <h1>Welcome, Omard2000</h1><br>
                <p>some text</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

你的身高是9％，这就是你的链接失败的原因，删除高度：9％;在你的CSS中

为什么文本元素超出了div？

1 个答案: