CODEWITHSUNDEEP
htmlcss
Georgi Antonov
Georgi Antonov

Reputation: 1641

How to properly vertical align text inside Menu Buttons

This problem is rankling me for days. I have finally completed my Menu Bar and now the text-align is the problem. If you find a better solution about my NavMenu, please give me some hints.

What is the best way to set background-img of article inside this section and then place div contents with background: rgba(0,0,0,0.3) the picture real size is 800x600 but I need to stretch the width to 1000 and set height: auto. So the idea is the background-image to be set with height: auto and does not break the content over it.

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;
}

Upvotes: 1

Views: 93

Answers (2)

Timo Widmaier
Timo Widmaier

Reputation: 29

you can use the CSS property "line-height" to set the element height of the text to the height of the element it is inside of. The visible text will be centered if line-height > font-size.

Upvotes: 0

Jozsi
Jozsi

Reputation: 138

Well sincerely your code is a complete mess. Why you used height in % if you know the actual height of the header. The most simple way would be to give the "nav a" the same line-height as its height.

nav a{ height: 50px; line-height: 50px; }

Try this and it will be aligned vertical. Anyway your using 50px as height all the time, because you use 50% of a predefined 100px height which will be 50px all time...

Upvotes: 3

Related Questions