I'm trying to make a website and it has, what I call, a banner on top of its navbar.
The banner has two images in it. I intend one image to be aligned to the right in the banner and one image to be aligned to the center, both vertically as well as horizontally.
I have tried the margin:auto; but it still isn't putting it in the center.
Please suggest a way in which there are no fixed values involved and the one that doesn't interfere with the height and width provided in the CSS(image).
Also, if you know, can you please tell me how to keep the height and width defined in the CSS intact no matter what?
The image I want to center is : banner_txtcombo
HTML:
<body>
<div class="brdr_top"></div> <!-- A little gold border at the top -->
<div class="header" id="banner">
<img src="http://i.imgur.com/NJJKSXh.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
<img src="http://i.imgur.com/OrPKrUc.png" id="banner_logo"/> <!-- The LMUN Logo -->
</div>
<div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->
<div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>
<div class="nb_item">ABOUT US <span id="dArrow"></span>
<ul id="abtus_menu">
<li class="nb_item_li"><a href="http://www.lamartinierelucknow.org/" target="_blank">LA MARTINIERE COLLEGE</a></li>
<li class="nb_item_li">LMUN 2015</li>
<li class="nb_item_li">SECRETARIAT</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
<ul id="rgstr_menu">
<li class="nb_item_li">INDIVIDUAL</li>
<li class="nb_item_li">DELEGATION</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
<ul id="comt_menu">
<li class="nb_item_li">COMMITTEE 1</li>
<li class="nb_item_li">COMMITTEE 2</li>
<li class="nb_item_li">COMMITTEE 3</li>
<li class="nb_item_li">COMMITTEE 4</li>
<li class="nb_item_li">COMMITTEE 5</li>
<li class="nb_item_li">COMMITTEE 6</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>RESOURCES <span id="space">
</span></div>
<div class="nb_item">EVENTS <span id="dArrow"></span>
<ul id="evnt_menu">
<li class="nb_item_li">KEYNOTE SPEAKERS</li>
<li class="nb_item_li">SOCIALS</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>SPONSORS</div>
<div class="nb_item"><span id="space"></span>CONTACT US<span id="space">
</span></div>
CSS:
.html
{
background-color: #FFFFFF;
}
body
{
margin: 0;
padding:0;
}
/* Everything above + navbar begins(visually) */
.brdr_top
{
display:flex;
height: 5px;
width: 100%;
background-color: #FFD700;
}
.header
{
width: 80%;
margin:auto;
padding:0;
display:flex;
}
#banner
{
height: 200px;
width: 80%;
background-color: #FFFFFF;
}
#banner_txtcombo
{
height: 120px;
width: 696px;
position:static;
margin:auto;
display:inline-block;
}
#banner_logo
{
/* Aspect ratio to be maintained: width = height(in pixels) * 1.7043 */
height: 180px;
width: 307px;
margin-left:auto;
margin-top:auto;
margin-bottom:auto;
display:inline-block;
}
#navbar
{
background-color: #70A5DA;
height: 28px;
}
/* Navbar + Everthing above it ends(visually) */
/* Items in the navbar and their actions begins*/
.nb_item
{
display:inline-block;
width:auto;
padding:0px 10px;
color:#FFFFFF;
margin:auto;
text-align:center;
line-height:28px;
position:relative;
}
.nb_item #dArrow:after
{
display:inline;
color: #FFFFFF;
content: '\25BC' ;
}
.nb_item:hover #dArrow:after
{
display:inline;
content: '\2003';
}
.nb_item #space:after
{
display:inline;
content: '\2003';
}
/* Done to make dropdown options have even darker tone on hover *Start* */
.nb_item_li:hover
{
color:#CCCCCC;
}
/* *End* */
a
{
text-decoration: none;
color: #DDDDDD;
}
a:hover
{
color: #CCCCCC;
}
/* Done because of bug causing about us menu to drop even before hovering on it *Start* */
.nb_item ul
{
position:absolute;
padding:0;
margin:0;
text-align:left;
display:none;
width:15em;;
height:28px;
}
.nb_item:hover ul
{
display:block;
}
/* *End* */
.nb_item:hover
{
color: #DDDDDD;
cursor:pointer; /* To get that hand symbol */
}
#abtus_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #abtus_menu li
{
display:block;
}
#rgstr_menu li
{
margin-left:1em;
list-style-type:none;
display:none;
}
.nb_item:hover #rgstr_menu li
{
display:block;
}
#comt_menu li
{
margin-left:1em;
list-style-type:none;
display:none;
}
.nb_item:hover #comt_menu li
{
display:block;
}
#evnt_menu li
{
list-style-type:none;
display:none;
}
.nb_item:hover #evnt_menu li
{
display:block;
}
.menu li
{
display:inline;
}
/* Items in the navbar and their actions end */
Here's the JSFiddle: JSFiddle
