I'm trying to create a simple navigation that consists of five list items. All of which are 20% in width. There are two items containing text, a centered item containing the site logo as an image and then another two list items containing text.
My issue is that when I have an image in the third item, the text in the surrounding list items gets bumped down. I can't see any margins or anything acting upon them or any reason why this should be happening and no matter what I try, it doesn't seem to work.
Any ideas or an explanation would be much appreciated :)!
JSFiddle
HTML
<div class="navigation">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Categories</li><!--
--><li><img src="http://www.placehold.it/140x64"></li><!--
--><li>Contact</li><!--
--><li>Personalise</li>
</ul>
</div>
</div>
CSS
.navigation {
top: 0;
width: 100%;
height: 64px;
position: fixed;
background: #ffffff;
border-bottom: 1px solid #dfdfdf;
}
.navigation .container {
width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
.navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navigation li {
width: 20%;
height: 64px;
display: inline-block;
text-align: center;
font-size: 16px;
}
Add or replace this CSS properties in your .navigation li rules :
display: table-cell;
vertical-align: middle;
Example
Related
This question already has answers here:
Vertical align text in block element
(10 answers)
Closed 1 year ago.
I have an anchor tag <a> and I display it under a list item tag under an unordered list (which is a navigation bar) using a grid (for a few different reasons).
This is the structure: <ul><li><a>Content</a></li><li>...</li></ul>
The ul is a grid display, with specific column widths etc. I style the list item <li> element to be 100% width, and 100% height. (to fill all of the allocated space in the grid), then I style the a tag to be 100% of the width, and 100% of the height (I need it to fill the entire container.
I also style the <a> tag with a text-align: center; which works great for the horizontal centering, but not for the vertical text centering.
So the problem that I have is that the <a> tag "Content" is aligned to the top of the container (instead of the middle) I've tried many attempts at centering the <a> tag but without success.
Note: vertical-align: middle; has no effect on this element because it has 100% of the height.
Here is an example:
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
/*display: inline-block;*/
bottom: 0;
left: 0;
width: 80%;
height: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
box-sizing: inherit;
background-color: #e4ffe4;
overflow: hidden;
width: 100%;
height: 100%;
vertical-align: middle;
}
ul.nav li a{
color: black;
/*padding: 1vw 5px 1vw 5px;*/
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
I was wondering if there is a way to keep the element's height 100% and center its text; if so I would much appreciate the help. If not I will work on a workaround for my use case.
just add this to your css :
a {
padding-top:10px;
}
use padding instead of height. I change some css code check below snippet
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
bottom: 0;
left: 0;
width: 80%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
background-color: #e4ffe4;
}
ul.nav li a{
color: black;
padding: 0.8rem 0.3rem;
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
How can I align all my bullets perfectly?
Expected result: Bullets line up to one another
Actual result: They move depending on how big the text is for the
JSFiddle for clarification:
https://jsfiddle.net/hk12hhp1/
Result I want (look at red line):
http://prntscr.com/grt24m (make bullets aligned just like red line is straight)
Fiddle code:
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
Note: I still want text-align to be center
An alternative solution, using pseudo-element to create the bullet, with position: absolute positioning it on the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
ul {
list-style: none;
}
li {
padding-left: 20px;
position: relative;
}
li:before {
content: '☻';
position: absolute;
left: 0;
top: 1px;
font-size: 10px;
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
Your question isn't at all clear about exactly what you mean by wanting the bullets vertically aligned on a centered list.
Having the bullets all the way to the left in a centered list is not any sort of standard typography conventions, so I think you might really be asking is for the entire left-aligned list inside the container? I've seen this asked more often than having the bullets float all the way to the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 300px;
list-style-position: inside;
}
ul {
text-align: left;
padding-left: 0; /* remove any padding to stop it throwing off the "center" */
margin: auto; /* center the ul */
display: inline-block; /* hack to make the ul only as wide as its contents */
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
To do this, you just need to change the styling for the ul, nothing else.
#center-everything{
background-color: gray;
height: 100px;
width: 300px;
}
li {
display: inline-block;
}
li:before {
content: "■"
}
span {
position: absolute;
left: 150px;
transform: translateX(-50%);
}
<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>
</ul>
</div>
After having had troubles trying to display three containers in a row with the middle one being centered on the page and the side ones being of a fixed width I came across the CSS Flexbox model, mentioned in a Stackoverflow question.
Using display: flex instead of float: left or displaying the containers as inline-box whilst messing with margin seems to be working quite well, with way fewer lines of code.
However, I ran into an issue with flexbox that I can't seem to solve on my own:
I want a container #menubar to hold three containers in a row: #logo, nav and #search.
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles</li>
<li>Images</li>
<li>About</li>
<li>Disclaimer</li>
</ul>
</nav>
<div id="search"></div>
</div>
The #logo-container as well as the #search-container are of a fixed size (width: 80px, height: 80px). One should be placed at the very left side of the #menubar-container and one should be placed at the very right.
The nav-container should be centered within the middle of the #menubar-container. Basically the positioning is working and I get the desired layout:
[#logo left] [nav centered] [#search right]
However, for some reason the #logo-container is being displayed at the specified dimension of 80px width * 80px height while the #search-container is being displayed at 79px width * 80px height, even through the CSS looks like:
header div#menubar div#logo {
width: 80px;
height: 80px;
background-color: orange;
}
header div#menubar div#search {
width: 80px;
height: 80px;
background-color: orange;
}
To confirm I made a screenshot and zoomed in with Photoshop, selecting the container to view its dimensions.
I can't figure out why the #search-container is missing one pixel in width.
Here is a JSFiddle with the HTML and CSS I am using.
Am I using flexbox correctly?
How do I fix it so both side-containers are 80x80 pixel in dimensions?
Am I using flexbox correctly?
Yes and no
Instead of width you should, ideally, be using the flexshorthand property combining, flex-grow, flex-shrink and flex-basis.
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
Alternatively, you can ensure that the element doesn't shrink by using width AND the flex-shrink value of 0
* {
margin: 0;
padding: 0
}
body {
background-color: #dfe3e5;
}
header div#top {
height: 22px;
/*background-image: url('../img/colorbar.png');
background-position: top left;
background-repeat: repeat-x;*/
background-color: gray;
}
header div#menubar {
background-color: #1c2227;
display: flex;
justify-content: space-between;
}
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
header div#menubar nav {
display: table;
text-align: center;
background-color: darkred;
}
header div#menubar nav ul li {
display: inline-block;
margin-left: -4px;
list-style-type: none;
line-height: 80px;
text-align: center;
}
header div#menubar nav ul li a {
outline: 0;
display: block;
text-transform: uppercase;
padding: 0px 20px;
font-size: 1.1em;
font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #eee;
text-decoration: none;
}
header div#menubar nav ul li a:hover {
color: #000;
background-color: orange;
}
header div#menubar div#search {
flex: 0 0 80%;
height: 80px;
background-color: orange;
}
<header>
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles
</li>
<li>Images
</li>
<li>About
</li>
<li>Disclaimer
</li>
</ul>
</nav>
<div id="search"></div>
</div>
</header>
Then you get the right result
I just want to move the 3 links(shaped into block) to center. it should be easy but I just can't figure out how to. Center as in horizontally center. its probably a silly mistake or concept problem. I don't want to move the text in centre of box, just want to move the box.
CSS:
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}
a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}
a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}
header li:nth-child(3)
{
font-size: 25px;
}
HTML:
<header>
<ul>
<li> Google</li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li> Facebook </li>
<li> Wikipedia </li>
</ul>
</header>
How about displaying your whole unordered list as an inline block and centering the text content within your header, making the list centered:
header{
text-align: center;
}
header > ul{
display: inline-block;
}
JSFiddle
Note: I removed the margin from your anchors, since I assumed this was some attempt at making them more central. Correct me if I'm wrong.
You can also add margin: 0 auto; to the actual anchor tags and remove your margin-left attribute. Fiddle
As it's been said, to center blocks horizontally you should use automatic margins on both left and right sides. It will work with any block (not inline elements) that has a specified width. Inline elements can easily be converted into blocks with display: block;
div{
display: block;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 100px;
width: 100px;
}
<div></div>
So I've seen several answers to this question here and around the web, but I cannot seem to get it to work for me.
This is first time coding anything beyond the basics (and I only have a week to do it for a class).
I've tried using two ul's with a div in the middle, but one ul with the logo image as a li seems to get me the closest. My problem is that while the logo is actually centered, I can't get the other li's to be centered around it while getting the whole nav bar itself to be centered on the page.
The site will also have to be responsive (a whole other issue, I know, but I don't want to gunk up my code with a solution that will be incompatible with a responsive design). I'm also not sure hoe to get the logo and the other li's to be vertically centered. I've tried 'vertical-align: middle' but without any success. Thanks so much for any help.
Here's my HTML.
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div>
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li{
display: inline-block;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
You can go to the site [here].
Don't know why are you using logo in menu. You can place it to the center using position property. Using your current structure responsive version is also difficult.
For desktop version, add below code in your css
.nav ul li:nth-child(3){
width:250px;
}
This will create a proper structure. But I would suggest, not to use current structure to center a logo. Separate logo from your menu and place it in separate div and position it using position property.
Here is the update fiddle http://jsfiddle.net/JtfBP/
#logo {
height: 60px;
padding: 0;
width: 250px;
}
Can you make the background of the header the logo instead and not make it repeat?
.header {
width: 965px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
background:url('Images/pantry logo.png') center;
}
Use separate div layers instead of a ul list, that utilise the same div class (div.navigator) with the same height as the header, then use display:float and float: left in your css.
div.navigator {
list-style: none;
text-decoration: none;
width: 192px;
height: 200px;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
display: float;
float: left;
}
so your header code is now:
<div class="header">
<div class="nav">HOME</div>
<div class="nav">MENU</div>
<div class="nav"></div>
<div class="nav">CONTACT</div>
<div class="nav">ABOUT</div>
</div>