I know there are a lot of answers with this subject but it still doesn't work somehow with my code.
Every time I try to center the text with text-align center it doesn't work unless I remove float: left, display: inline or display: inline-block. But then I have a vertical centered navigation bar...
Can anyone help me with this?
This is my HTML code:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Moviekids festivals</li>
</ul>
</div>
and here is the CSS code:
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
You need to set the text-align on the parent element like so:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
See Demo
I just edited your css to acheive what you need
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
DEMO
Always avoid using body text-align try using instead for wrapper.
Make sure you have mentioned <!DOCTYPE html> on the top of your HTML code.
Otherwise your code seems perfect.
Related
I cannot seem to get the navigation to vertical-align: middle; along with the title. Any idea how to fix this issue?
https://jsfiddle.net/ozvmkeaq/
header,
nav {
height: 80px;
}
header {
background-color: #E74C3C;
vertical-align: middle;
}
header nav {
float: right;
list-style: center;
text-transform: uppercase;
color: #ECF0F1;
vertical-align: middle;
}
nav li {
display: inline;
padding: 10px;
}
nav a {
display: inline-block;
text-decoration: none;
}
.title {
float: left;
}
.title h1 a {
color: #ECF0F1;
text-decoration: none;
padding: 15px;
}
<header>
<div class="title">
<h1> HTTP</h1>
</div>
<nav>
<ul>
<li class="active">Home</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</header>
By adding the following CSS, the links vertically center.
ul { margin: 0; height: 100%; display: table; width: 100%;}
nav ul li { height: 100%; vertical-align: middle; display: table-cell;}
I've also updated your fiddle: https://jsfiddle.net/ozvmkeaq/2/
Basically, you need the combination of table and vertical-align properties to tell the browser you want the content in the middle.
As as an alternative, you can also use flex-box.
display: flex;
align-items: center;
You need to set vertical-align:middle to the list items themselves. I would also set it to the links directly to compensate for any list item padding etc.
For example:
nav ul li, nav ul li a{vertical-align:middle;}
This is because vertical-align sets the position based on the parent element, so you need to set it to the child element (different from properties such as text-align where you can set the style to the parent element to affect the elements within).
See more on vertical align at the W3C vertical-align property guide.
Or Try it here.
Try this
header {
background-color: #E74C3C;
height: 5em;
position: relative;
}
header * {
padding: 0;
margin: 0;
}
header a {
text-decoration: none;
}
header nav, header .title {
display: block;
height: 100%;
}
header .title {
position: absolute;
top: 0;
left: 0;
}
header .title h1 {
position: relative;
top: 0.70em;
}
header .title a {
color: #ECF0F1;
margin: 0 0.5em;
}
header nav {
position: absolute;
right: 0;
top: 0;
padding: 0 0.5em;
}
header ul {
list-style-type: none;
list-style-position: inside;
position: relative;
top: 2em;
right: 0;
}
header ul li {
display: inline-block;
padding-right: 0.25em;
}
update this 2 style and it should do the trick.
nav ul
{
padding: 0px;
margin: 0px;
}
nav li
{
display:inline-block;
padding-right:10px;
padding-left:10px;
line-height: 80px;
background-color: green;
}
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
I'm trying to centralize my nav bar, I've tried text align center, and margin auto, but it stays fixed to the left. I also tried to add a width, but still it stays fixed. Thanks in advance for your help. Please check out the JSFIDDLE. The HTML is as follows:
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo">Magna Contra</li>
<li class="active">Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
</ul>
</div>
</section>
And the CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
padding:15px;
text-align: center;
margin: auto 0;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
li a:hover{
color:white;
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.container {
display: table;
width:980px;
height: 100%;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: left;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.container {
margin: 0 auto;
text-align: center;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
The easiest option is to add text-align: center to the ul:
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
I would also set the lis to display: inline-block to give you more control over their styling.
Your div "section-nav" is not closed. I would fix this first.
You have also applied text-align:left to your .top div, which is the main container for the navigation buttons.
In the given fiddle you have
.top {
text-align: left;
}
change it to
.top {
text-align: center
}
fidd ->http://jsfiddle.net/ztyUF/2/ Is this what u ve asked?
I used this when I had the same problem and have pretty much duplicated it for multiple sites. He explains it much better than I can.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:
.center {
text-align: center;
}
nav {
width: 900px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin: 0 auto 20px auto;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
background: #C0C0C0;
}
nav ul:after {
content:" \2022 ";
clear: both;
display: block;
}
nav ul:last-child:after {
content:"";
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-align: center;
display: block;
padding: 20px 15px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!
Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/
UPDATE: After taking #Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?
Updated JSFiddle: http://jsfiddle.net/VCKMU/6/
Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.
http://jsfiddle.net/VCKMU/6/
The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.
You just need to modify the selector to only target the list-items are the children of the first <ul>:
.center > ul > li {
display: inline-block;
}
http://jsfiddle.net/VCKMU/8/
I think it should work if you give nav { width: auto; margin: auto; }
I usually fool around in the Chrome debugger for issues like this.