时间戳

首页 > 解决方案 > 如何从导航菜单的底部边框到横幅图像的末尾水平和垂直居中文本框？

css - 如何从导航菜单的底部边框到横幅图像的末尾水平和垂直居中文本框？

问题描述

如何从导航菜单的底部边框到响应式网站上横幅图像的末尾水平和垂直居中文本框？
我将不胜感激任何建议。

我更新了更改。它现在居中。

CSS 媒体查询最小宽度 768：包含 在此处输入图像描述

CSS封面： 在此处输入图像描述

CSS 包含：我更喜欢这个背景，因为整个图像都显示出来了。但是，我无法使此方法起作用，因为我无法使字体框居中在导航的黄色底部边框和横幅图像的底部之间。此外，如果我增加浏览器大小，背景图像将不会占用浏览器的宽度。 在此处输入图像描述

横幅的背景图片： 横幅的背景图片

原始 JSFiddle： https ://jsfiddle.net/4enbjpyz/

更新 JSFiddle： https ://jsfiddle.net/me37hnvs/

这就是我所拥有的：

引导 HTML：

<div class="container-fluid">
    <div class="bannerHeader">
        <nav class="navbar navbar-expand-md navbar-dark" id="myNavmenu">
            <a class="navbar-brand d-md-none ml-auto" href="#" id="menu">Menu</a>
            <button class="navbar-toggler" type="button" id="TEST" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item pr-3"><a class="nav-link active" href="#">Nav 1</a></li>
                    <li class="nav-item"><a class="nav-link" href="payment.html">Nav 2</a></li>
                </ul>
           </div>
        </nav>  

        <div class = "d-flex">
            <div class = "container justify-content-center fontBox pl-4 pr-4 pt-3">
                <h3>Heading</h3>      
                <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
            </div>
        </div>
    </div>
 </div>

 <div class="container bg-white">
    <p>This is some text.</p>      
    <p>This is another text.</p>      
 </div>

CSS：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

a {
    text-decoration: none;
}

body { 
    background: #fff;
}

.container-fluid {
    padding:0;
}

.bannerHeader { 
    /* background-color: I normally use a different color, however I used a red background to show there is no negative space (red) */  
    background-color: #fe0808;
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 450px;
}

#myNavmenu {
    background-color: rgba(0,0,0,.1);
    border: 1px solid yellow;
}

/* Center Horizontal and Vertically */
.fontBox { 
    background-color: rgba(255,255,255,.3);
    color: #fff;;
    letter-spacing: 1px;
    margin: 0;
    position: absolute;
    top: 58%; 
    left: 50%;
    transform: translate(-50%, -58%);
    width: 90%;
} 

p {
    font-size: 16px;
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .bannerHeader { 
        background-position: center top;
        background-size: contain;
        background-repeat: no-repeat;
        height: 0;
        padding: 0;
        /* aspect ratios: divide the height of the original image by it's own width, and multiply by 100 to get the percentage value */
        padding-bottom: 52.33%; 
        position: relative;
        }
}

标签： csstextboxcenter

解决方案

与其他标签相比，该<img>标签具有一些特殊的行为。在您的情况下，我建议您使用div（或可能figure）标签并将横幅附加为背景图像，然后设置任何 CSS 属性来控制图像行为。然后你可以使用 css flex box 使盒子居中。calc()如果导航的高度和字体框是固定的，您也可以使用 CSS方法。sudo 示例可能是这样的：

top: calc(100% - ({navigationHeight} + {fontBoxHeight}));

figure如果您要使用这种方法，请不要忘记将字体框放在标签内。

希望能帮助到你。

推荐阅读