I've build a navigation and I wanted the img and the list (ul,li) centered on the same line (vertical-align:middle;) but the list is above the img. So my question is, how I can get both centered on the same line?
HTML:
<div id="logo">
<img src=""></img>
</div>
<nav id="main-nav">
<ul>
<li>
</li>
</ul>
</nav>
CSS:
#logo, #main-nav ul li {
display: inline-block;
float: left;
margin-left: 2.5%;
position: relative;
vertical-align: middle;
}
I appreciate every comment and help!
In your CSS, you are aligning the list items, while you would want to align <nav>.
Related
I'm trying to right-align the nav without using float. I read somewhere online that I could set the parent element to text-align: right, but that didn't work when I tried it. I appreciate any help for what I know is an easy problem but one that has confounded me most of the day.
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav {
display: inline-block;
}
nav li {
display: inline;
}
<header>
hi
<nav>
<ul>
<li>Home
</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</header>
https://jsfiddle.net/a6a367vp/
The solution is that you have to add text-align: right; to the parent element which is the header.
header {
text-align: right;
...
}
Then add display: inline-block; to the children (nav) and the children will be aligned right.
Another solution would be to set a width to nav and a:
header nav {
with: 80%;
}
header a {
width: 20%;
}
header nav ul {
text-align: right;
}
header nav ul li {
display: inline-block;
}
if you want the nav to move to the right, simple method is float:right but since you don't want to use this then text-align:right would place it on right if nav has 100% width for that row.
Therefore, you can do either of these two things.
right now using CSS you can make
nav{width:98%; text-align:right};
or for better results, use JS
var anchorTopWidth = $("a").width() / $('a').parent().width() * 100;
requiredWidth = 100-anchorTopWidth;
$('nav').css({'width': requiredWidth+'%', 'text-align':'right'});
Fiddle: https://jsfiddle.net/a6a367vp/3/
One possible and recommended solution is as follows:
Put the <nav> in a <div> element and then use the text-align property for the specified div. like this:
Html:
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
CSS:
.nav_menu{
text-align: right;
}
Update:
Put the <a> tag in another div and then specify the width for the selected divs. Your final code should be like this:
HTML:
<header>
<div class="atag_div">
hi
</div>
<div class="nav_menu">
<nav>
<ul>
<li>Home</li>
<li>bop</li>
<li>bop</li>
<li>bop</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #AEB7CC;
padding: 0 10px;
}
nav li {
display: inline;
}
.atag_div{
width: 20%;
display: inline-block;
}
.nav_menu{
width: 78%;
display: inline-block;
text-align: right;
}
jsfiddle:
https://jsfiddle.net/pokies/7Lnfq7es/
I want to create a navbar with a logo in the center, and two navbar items (links) on either side, width equal spacing. I also need the logo to be lined up center with the navbar items.
Here's the code i have thus far. I'm using bootstrap.
HTML:
<div class="nav">
<div class="container">
<ul>
<li> Navbaritem1 </li>
<li> Navbaritem2 </li>
</ul>
<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>
<ul>
<li> Navbaritem3 </li>
<li> Navbaritem4 </li>
</ul>
</div>
</div>
CSS:
.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}
.logo {
width: 100px;
display: inline-block;
height: auto;
}
.logo img {
float: none;
padding-top:10%;
}
ul {
display: inline;
text-align:center;
width:30%;
}
Did you try centering a div inside the container?
<div class="container">
<div class="center">
Centered content here
</div>
</div>
And the css:
.center {
display: table;
margin: 0 auto;
}
Also this post might've helped you with a quick search.
I would like to position the image and the navigation links so that they are vertically aligned with the HeadContainer and each other.
HTML
<header>
<div id="HeadContainer">
<img src="favicon.png" id="title"/>
<nav>
<p>Home</p>
<p>About</p>
<p>Portfolio</p>
<p>Contact</p>
</nav>
</div>
</header>
CSS:
#HeadContainer {
width:70%;
margin: 0 auto;
display: block;
}
header {
height: 60px;
}
nav {
float: right;
}
nav p {
display: inline;
margin-left: 10px;
font-size: 1.2em;
}
#title {
float: left;
width: 40px;
}
At the moment they are not aligned. How would I align the paragraph tags in the nav with the image?
You should know that inside a navigation you'll hardly have <p> elements. I don't see any reason Google also. So go with: http://jsbin.com/melag/2/edit
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
nav {
float: right;
}
nav ul{
list-style:none;
}
nav ul li{
display:inline-block;
vertical-align:middle;
}
Roko's answer is the tried and true method. I recommend it too. I want to point out that, in HTML 5, the <nav> tag is intended to replace a modified unordered list for navigation menus.
W3 Schools <nav> tag page
I want to make a nav bar using images but still have text under each image, yet I also want the text to be centered.
I have the following HTML
<div class="whatwedo-wrapper" id="whatwedo">
<div class="whatwedo">
<ul>
<li>
<img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
<br>
Brand Online
</li>
<li>
<img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
<br>
Brand Management
</li>
</ul>
</div>
</div>
and I have made what I have a jsfiddle here - http://jsfiddle.net/B7sdp/
The overall outcome I am looking for is for the images to be centered and the text to be underneath its image, also centred.
Thanks in advance!
You should add text-align:center property to your li and replace float:left with display:inline-block
.whatwedo li {
width: 200px;
display:inline-block;
list-style: none;
text-align:center;
}
See example here : http://jsfiddle.net/B7sdp/1/
You need to add text-align: center; to .whatwedo li
.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
text-align: center;
list-style: none;
}
JSFiddle
I have some HTML, and I am trying to figure out a way to make my logo, nav menu and social media icons one a single line.
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<ul class="nav">
<li class="menuitem">Home</li>
<li class="menuitem">Blog</li>
<li class="menuitem">Test</li>
<li class="menuitem">Contact</li>
</ul>
<div class="social-media">
<img src="facebook.jpg">
<img src="twitter.jpg">
<img src="pinterest">
</div>
</div>
I want to logo to the left, nav menu in the middle, and the social media icon to the right.
I just realized that I forgot to post my CSS:
div .h1 {
float: left;
}
li {
display: inline-block;
}
ul {
float: left;
}
.nav {
float: left;
}
The easiest way to achieve this is text-align: justify:
Take a look at this Fiddle
Another good Tutorial for this effect is found on Codrops.