Html 在父元素内垂直对齐div_Html_Css_Vertical Alignment

Html 在父元素内垂直对齐div

html css

Html 在父元素内垂直对齐div,html,css,vertical-alignment,Html,Css,Vertical Alignment,我一直很难在父元素中垂直对齐div。我尝试了垂直对齐：居中，显示：内联块和我在垂直对齐上能找到的任何东西，但实际上没有任何东西对我有效。如果有什么影响的话，我会用bootstrap 我想垂直对齐div#banner中的div.banner内容。我希望这是一个简单的修复，我只是错过了一些简单的东西当我尝试使用display:table cell时它已断开水平居中我已经包括了整个文件，以防有什么东西从其他地方破坏它。非常感谢这是我的HTML： <!doctype html> &l

我一直很难在父元素中垂直对齐div。我尝试了

垂直对齐：居中，显示：内联块
和我在垂直对齐上能找到的任何东西，但实际上没有任何东西对我有效。如果有什么影响的话，我会用bootstrap
我想垂直对齐div#banner中的div.banner内容。
我希望这是一个简单的修复，我只是错过了一些简单的东西
当我尝试使用display:table cell时它已断开水平居中
我已经包括了整个文件，以防有什么东西从其他地方破坏它。非常感谢
这是我的HTML：
<!doctype html>
<html>
<head>
    <title>My title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
    <div id="banner">
        <div class="bannerAlign">
            <nav class="navbar navbar-default navbar-static-top">
                <ul class="nav navbar-nav right">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Another Link</a></li>
                  </ul>
            </nav>
        </div>
        <div class="container bannerContent"> <!-- I want this div vertically aligned -->
            <img id="profile" src="images/profile.jpg" />
            <header>
                <h1>My name here</h1>
                <h4>More words here</h4>
            </header>
        </div>
        <span class="glyphicon glyphicon-menu-down down-arrow"></span>
    </div>
    <div class="container">
        <div class="content">
            <div class="well">
                <h1>Some content here</h1>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

只需使用以下css：
#banner {
    display: flex;
    align-items: center;
}

您可以使用以下命令：。最简单的方法是使用超级用户编写的flexbox。
正文{
背景：url（../images/yosemite.jpg）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
字体系列：Oswald；
宽度：100%；
最大宽度：100%；
溢出：隐藏；
}
navbar先生{
背景：无；
边界：无；
颜色：白色；
}
.对{
浮动：对；
}
纳瓦尔先生{
颜色：#fff！重要；
文本转换：大写；
}
#横幅{
背景：rgba（0,0,0,6）；
颜色：白色；
高度：100vh；
边缘底部：50px；
字母间距：1.3px；
显示器：flex；
最大宽度：100%；
弯曲方向：立柱；
}
.横幅{
保证金权利：5%；
}
.横幅内容{
文本对齐：居中；
柔性生长：1；
/*垂直对齐：中间对齐*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.bannerContent标题{
显示：内联块；
左边距：3em；
}
.bannerContent标题>h1{
边缘底部：13px；
}
#侧面图{
宽度：16vw；
边界半径：100%；
}
.向下箭头{
位置：绝对位置；
底部：0；
最高：95%；
显示：块；
左：50%；
字号：2.5em；
}
/*拉丁语系*/
@字体{
字体系列：“Oswald”；
字体风格：普通；
字体大小：400；
src:local（'Oswald-Regular'）、local（'Oswald-Regular'）、url(https://fonts.gstatic.com/s/oswald/v11/Qw6_9HvXRQGg5mMbFR3Phn-_kf6ByYO6CLYdB4HQE-Y.woff2)格式（'woff2'）；
unicode范围：U+0100-024F、U+1E00-1EFF、U+20A0-20AB、U+20AD-20CF、U+2C60-2C7F、U+A720-A7FF；
}
/*拉丁语*/
@字体{
字体系列：“Oswald”；
字体风格：普通；
字体大小：400；
src:local（'Oswald-Regular'）、local（'Oswald-Regular'）、url(https://fonts.gstatic.com/s/oswald/v11/_P8jt3Y65hJ9c4AzRE0V1OvvDin1pK8aKteLpeZ5c0A.woff2)格式（'woff2'）；
unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2212、U+2215；
}






我的名字在这里
这里有更多的话
这里有一些内容
您能提供一把可用的小提琴或密码笔吗。用这个棒极了！我不敢相信我没试过。最后，我需要调整一些div，这样就不会影响导航条，但效果很好，谢谢！
#banner {
    display: flex;
    align-items: center;
}