I am having difficulty with centering the navigation bar on this page.
I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.
#nav ul {
display: inline-block;
list-style-type: none;
}
It should work, I tested it in your site.
Add some CSS:
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
If you have your navigation <ul> with class #nav
Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;
that should center it.
Just add :
*{
margin: 0;
padding: 0;
}
nav{
margin: 0 auto;
text-align: center;
}
The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)
Here is how I have done:
body {
margin: 0;
padding: 0;
}
div maincontainer {
margin: 0 auto;
width: ___px;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-left: auto;
margin-right: auto;
}
and do not forget to set doctype html5
Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.
You could also use float and inline-block to center your nav like the following:
nav li {
float: left;
}
nav {
display: inline-block;
}
Related
I'm trying to centre the menu on my Wordpress site with CSS:
http://thewholesomebakery.co.uk/
I'm aware that I have to remove float:left; but then solutions seem to vary from theme to theme.
Can anyone help me out with this?
Use this css:
.site-bar .nav {
width: 100%;
float: none;
text-align: center;
}
.navigation > li {
float: none;
display: inline-block;
}
You can remove the float and add margin: auto;. The page of the w3c about centering things is an absolute must-read for any web developper.
Change your css to:
.site-bar .nav {
float: left;
width: 100%;
padding-top: 3px;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
that should center the top navigation!
I've been fooling around with HTML/CSS recently, and I'm trying to vertically align the text in an li so that it is in the center. I've seen this question (or some variation of it) asked a bunch of times, so I apologize in advance for asking a question I'm sure you're tired of seeing, but I can't get any of the suggested solutions to work. I'm also trying to avoid setting a specific height/line-height for the li, since I'd like this to adjust to the size of the screen.
Here's the HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Experience</li>
<li>Contact</li>
</ul>
Here's the CSS:
#nav {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: block;
height: 100%;
}
#nav li a:hover {
background: #ccc;
}
I also have this fiddle set up in case you'd like to mess around with it and see if you can get it working. Thanks!
You can just make the line-height of #nav li 25% of the viewport height like so
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
line-height: 25vh; /* this is the only thing you need to add */
}
It's very simple and short and will work with any changes to the text (like font-size etc) or the list. It doesn't matter how many items you add or remove from the list or what changes you make to the height of the #nav or its list items.
See the first working revision of your jsFiddle ;)
Set display: table; on your li
and
display: table-cell;
vertical-align: middle;
on your a
final styles:
#nav li {
display: table;
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
Rev 6 of your fiddle
Try these changes in your css
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
display: table; /* added */
}
#nav li a {
display: table-cell; /* changes from block to table-cell */
vertical-align: middle; /* added */
height: 100%;
}
See the working example here http://jsfiddle.net/t6ryfqzk/7/
Try making your li an inline-block if you want them next to eachother, or as block if you want them underneath eachother. Make sure you give the li elements a fixed width, and set their text-align as centered.
I have a block of links:
<ul>
<li>Link 1</li>
<li><a class="icon26 icon2">Link 2</a></li>
</ul>
Each link has an accompanying icon. What I'm trying to achieve is 2 things:
1) To centre both the image and the text within the LI tag
2) To block the A tag so it fills the LI tag
Here's what I'm trying to do:
I can achieve 1 or 2 but not both at the same time - any ideas?
At present i'm using a existing sprite solution for the link - this may not be ideal, but it can be changed if a solution is found. Here's the CSS:
.icon26:before
{
background:url(/assets/images/sprite26.png) no-repeat 0 0;
content:"";
display:block;
float:left;
height:2.6rem;
width:2.6rem;
}
.icon1:before
{
background-position:-32px -2px;
}
Here's the remaining CSS for the UL structure:
#nav ul
{
width:100%;
}
#nav ul li
{
float:left;
width:33.33%;
}
#nav a
{
display:block;
line-height:4.6rem;
}
#nav a:before
{
margin:1rem 0.5rem 1rem 0;
}
It's perfectly possible. Remove the float, and use a combination of display: inline-block and vertical-align: middle instead.
Here's the fiddle.
Here's the relevant code:
.icon26:before {
background: url(/assets/images/sprite26.png) no-repeat 0 0;
content: "";
display: inline-block; /* <-- instead of float: left */
vertical-align: middle; /* <-- add to vertically center inline blocks */
height: 2.6rem;
width: 2.6rem;
}
#nav ul li {
float: left;
width: 33.33%;
text-align: center; /* <-- add this to horizontally center inline items */
}
Make the <A> position: absolute; top:0; left: 0;. And make icon and link center align same as you did. This will work.
You can use display: table-cell; property to center align vertically & set width: 1% for full width (justified) menu items.
.nav {
list-style: none;
padding-left: 0;
}
.nav > li {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.nav > li > a {
display: block;
padding: 10px;
text-align: center;
}
Example: http://codepen.io/neilhem/pen/ramzXG
Warning: This method is buggy in Safari 8.0
I am having some problems getting my menu to center on the screen. I thought setting the display to block, and making the left and right margins to auto, would do this for me; however, I was wrong. Here is a JSFiddle to help show the problem. Thanks for the help.
<ul id="menuList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
#menuList{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
float: left;
margin-right: 0.5em;
}
#menuList a
{
display: block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
set menu to inline-block and parent to text-align:center
JS Fiddle
replace body with your parent id or class
body {
text-align:center;
}
#menuList {
display:inline-block;
}
The best way to center an element is by using margin: 0 auto; but the element need to have a fixed width (not 100% as you have).
So just add:
#menuList {
width:408px;
margin:0 auto;
}
Vitorino's answer is generally a bad idea. You don't want to put text-align: center on your body.
You could, however, set that CSS on the ul, and display the menu items inline(-block). As such.
#menuList ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menuList li {
list-style: none;
display: inline-block;
margin-right: 0.5em;
}
You have to change the width, example:
#menuList{
display:block;
width:70%;
margin-left:auto;
margin-right:auto;
}
You used display block, so that your elements start new line, and then floats, that they would stay in same line. Just don't use this weird combo.
If you need items stay in line use 'display:inline;'
if you need items to stick to either left or right side of parent element, use floats. Be careful as floats often mess all the thing up. There are other ways to float things, that doesn't pull them out of document flow.
Here is fixed CSS:
#menuList{
display:block;
width:100%;
margin: 0 auto;
text-align:center;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
display: inline;
margin-right: 0.5em;
}
#menuList a
{
display: inline-block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
I need to center html content inside a div class="partners" (top div with 2 images). As you can see from the image below (it floats left instead of center of the div):
This is my html code:
<div id="partners">
<div class="wrap clearfix">
<h2>Partnertnerzy serwisu:</h2>
<ul>
<li><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></li>
<li></li>
</ul>
<a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
</div>
</div>
Image:
CSS:
#partners, #top {
position: relative;
z-index: 100;
}
#partners {
margin: 12px 0 3px;
text-align: center;
}
.clearfix:after, .row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#partners .wrap {
width: 655px;
}
.wrap {
margin: 0 auto;
position: relative;
width: 990px;
}
#partners h2 {
color: #A6A5A5;
float: left;
font-weight: normal;
margin: 2px 15px 0 0;
}
#partners ul {
float: left;
}
ul {
list-style-position: outside;
list-style-type: none;
}
To center a div, set it's width to some value and add margin: auto.
#partners .wrap {
width: 655px;
margin: auto;
}
EDIT, you want to center the div contents, not the div itself. You need to change display property of h2, ul and li to inline, and remove the float: left.
#partners li, ul, h2 {
display: inline;
float: none;
}
Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.
There are many ways to center any element. I listed some
Set it's width to some value and add margin: 0 auto.
.partners {
width: 80%;
margin: 0 auto;
}
Split into 3 column layout
.partners {
width: 80%;
margin-left: 10%;
}
Use bootstrap layout
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">Your Content / Image here</div>
</div>
You just need
.parent-div { text-align: center }
Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:
Depending on the axis of the flexbox, you will need to align or justify items, read more at MDN
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}
in parent div
parentDiv: {
display:flex;
height:100%;
width:100%;
justify-content:center;
align-items:center;
}
You just do CSS changes for parent div
.parent-div {
text-align: center;
display: block;
}
The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.
To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.
To achieve that you have to remove the floating in the content elements and set the display property of the block levels elements to inline:
#partners .wrap {
display: inline;
}
.wrap { margin: 0 auto; position: relative;}
#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}
#partners ul {
display: inline;
}
#partners li {display: inline}
ul { list-style-position: outside; list-style-type: none; }
do like this :
child{
position:absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
After 2022.
Here is your class to center content both vertically and horizontally.
.center {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}