Question

这个问题让我好几天。我终于完成了菜单栏，现在text-align就是问题所在。如果您找到关于我的NavMenu的更好的解决方案，请给我一些提示。

在此background-img中设置article section的最佳方式是什么，然后将div内容与background: rgba(0,0,0,0.3)放在一起，图片实际尺寸为800x600但是我需要将width拉伸到1000并设置height: auto。因此，我的想法是使用background-image设置height: auto并且不会破坏其中的内容。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hotel</title>
        <link rel="stylesheet" type="text/css" href="Hotel.css">            
        <script src="HotelM.js"></script>
    </head>
    <body>
        <main>
            <header>
                <div></div>
                <nav>   

                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>

                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>

                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                    </ul>
                    <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                    </ul>
                        <ul class="Menu">
                        <li><a class="MenuButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                        <li><a class="dropButtons" href="#">ASD</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <article>

                </article>
            </section>
        </main>
    </body>
</html>

CSS：

    body , div ,h1, h2,img, section,canvas, main, footer , header , p , a, article, ul ,li, ol, table {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border:  0;
} 
main{
    width: 1000px;
    height: auto;
    margin: 0 auto;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ab0ed+0,9fd8ef+27,9fd8ef+27,bfe8f9+52,9fd8ef+79,2ab0ed+100 */
background: rgb(42,176,237); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(42,176,237,1) 0%, rgba(159,216,239,1) 27%, rgba(159,216,239,1) 27%, rgba(191,232,249,1) 52%, rgba(159,216,239,1) 79%, rgba(42,176,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(42,176,237,1) 0%,rgba(159,216,239,1) 27%,rgba(159,216,239,1) 27%,rgba(191,232,249,1) 52%,rgba(159,216,239,1) 79%,rgba(42,176,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#2ab0ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
header{
    width: 100%;
    height: 100px;
}
header div{
    height: 50%;
    width: 100%;    
}
header nav{
    height: 50%;
    width: 100%;    
    padding-left: 0.5%;
    z-index: 2;
}
header nav ul{
    list-style-type: none;
}

nav ul{
    position: relative;
    display: inline-block;
    width: 15%; 
    left: 5%;
    height: 100%;
    float: left;
}
nav li{
    height: 100%;
}
nav a{
    font-size: 1.7em;
    text-decoration: none;
    background-color: white;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
    display: none;

}
.MenuButtons{
    font-size: 1.7em;
    text-decoration: none;
    background-color: #4479db;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    display: block; 
    color: ghostwhite;
    display: block;
}
nav ul:hover a{
    display: block;
    background-color: #6e97e3;
    color: ghostwhite;
}
section article {
    height: auto;
    width: 100%;
}
.dropButtons{
    font-size: 1.3em;
    border-bottom: 1px solid #6e97e3;
    border-top: 1px solid #6e97e3;
}
.dropButtons:hover{
    background-color:  #004080;
    color: white;
      /* Firefox */
    -moz-transition: all 0.5s ease-in;
    /* WebKit */
    -webkit-transition: all 0.5s ease-in;
    /* Opera */
    -o-transition: all 0.5s ease-in;
    /* Standard */
    transition: all 0.5s ease-in;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

Answer 1

你的代码真是太乱了。如果您知道标题的实际高度，为什么以％为单位使用高度。最简单的方法是给＆＃34;导航a＆＃34;与其高度相同的线高。

导航{高度：50px; line-height：50px; }

试试这个，它将垂直对齐。无论如何你总是使用50px作为高度，因为你使用50％的预定义100px高度，这将是50px所有时间......

Answer 2

你可以使用CSS属性＆＃34; line-height＆＃34;将文本的元素高度设置为其所在元素的高度。如果行高> gt，则可见文本将居中。字体大小。

如何正确垂直对齐菜单按钮内的文本

2 个答案: