I'm trying to vertically center my text with my logo. When I use line height, it also raises my logo. How could I just raise the text so it's vertically centered with my logo? Here's my code.
HTML
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li> dfgkdfjg </li>
<li><img src="http://i.imgur.com/d0umnxt.png" /></li>
<li> pfopkp </li>
</ul>
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
display: table;
width: 100%;
height: 100px;
background-color: #151B1F;
}
#nav {
display:table-cell;
vertical-align:middle;
text-align:center;
}
#nav li {
margin-left: 50px;
margin-right: 50px;
display:inline;
}
Actually you are trying to align the text which will creates problem for you; instead of aligning the text try to align the image ...
Add this in your css
#nav img {
vertical-align: middle;
}
Here is working example Link.
Try to vertical align the image instead of the text:
#nav img {
vertical-align: middle;
}
This will do the job.
Related
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
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'm trying to create a header/nav bar where there will be navigation options on either side of a logo, which I would like all to be vertically centered. To achieve this, I'm using <li> and <li class> elements, but am having little luck with the vertical centering. Any ideas?
HTML
<header>
<nav>
<ul>
<li class="btn"><span>01</span>Home</li>
<li class="btn"><span>02</span>Vendors</li>
<li><img src="img/logo.png" alt="sews logo" /></li>
<li class="btn"><span>03</span>Tickets</li>
<li class="btn"><span>04</span>Blog</li>
</ul>
</nav>
</header>
CSS
nav {
margin: 40px auto;
width: 600px;
padding-bottom: 80px;
}
nav ul li {
display: inline;
}
nav ul li a {
margin:0 10px;
}
nav ul li.btn a {
padding-top: -10px;
}
nav ul li a span {
color: #e3c22a;
font-family: fanwood;
}
To vertically center something, apply the css rules display: table cell in addition to vertical-align: middle on the container element.
If the links and image were in the same element, say a div, you could set the image to use the style tag: vertical-align: middle;
position relative the header. position absolute the image. left: 50%; the image
I want to center four links in a div.
This is what I did so far: jsfiddle
Html:
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
Css:
#menu {
width: 200px;
height: 200px;
border: 1px solid #000;
background: #eee;
position: relative;
padding: 10px;
}
#menu>section {
position: absolute;
text-align: center;
width: 200px;
}
#menu a {
display: block;
vertical-align: middle;
height: 20px;
}
#menu .left {
float: left;
height: 160px;
}
#menu .right {
float: right;
}
#menu .bottom {
clear: both;
}
The problem is that the floated elements do not vertically centered as they should. I want the left and right elements to be in the middle and not at the top.
May be you can use line-height property for this. Like this:
#menu .left, #menu .right {
height: 160px;
line-height:160px;
}
http://jsfiddle.net/YdPzP/13/
try adding
.left, .right { line-height: 160px; }
Since you are already using html5, I would say aside tag would probably come in handy in your case:
here is a Sample
DEMO
You can use padding for vertically aligning the links
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<div class="middle">
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
</div>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
add the below css:
#menu div.middle{
height:90px;
padding-top:60px;
}
I ran into a seeming conflict between float:left; and vertical-align: middle;
In my case, I wanted several small images to line up horizontally. Some of them were the right size vertically and the others weren't tall enough, so i wanted to line up just those vertically that were the wrong vertical size.
Using a <ul>/<li> structure, I kept float:left; and dispay:inline; and it was ok in FF and IE 7,8,9, but not correct in Chrome and Safari. For some reason, the last image went to the next line even though there was ample room for it.
After eliminating completely float: left; the vertical-align: middle; then worked. Then it was just adding padding to line them up horizontally. Works now in all browsers.
Not sure why there is a conflict between float:left; and vertical-align:middle;
You may want to play with eliminating your float:left;