CSS:
.homeBar li {
float: center;
display: inline;
text-align: center;
font-family: Tahoma;
font-size: 13px;
list-style: none;
}
.homeBar img {
color: #94938e;
margin-right: 30px;
text-decoration: none;
}
HTML:
<ul class="homeBar">
<li><img src="images/friends.png"></li>
<li><img src="images/mail.png"></li>
</ul>
as you can see i tried float: center, but it wont center it..
If the widths of your elements (and thus, your list) are known, you could display the list as inline-block, and apply auto margins to it:
.homeBar li {
width: /* Full width (calculate it manually) */;
display: inline-block;
margin: 0 auto;
}
The width used should be the width of the images, plus padding and margin, after any margin collapse.
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
I have a media query to make my navbar buttons vertical on small screens, but when this happens there is blank space to the left of each button and I don't know why, as there is no left margin in my code. Thanks in advance to anyone who can get rid of this.
CSS:
/* Navbar */
#navbar {
background-color: #599;
list-style-type: none;
overflow: hidden;
margin: 0px;
width: auto;
text-align: centre;
font-family: 'corbel','arial';
text-align: center;
}
#nav_li {
float: left;
display: inline;
text-align: center;
}
#nav_a {
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
/* Media queries for smaller screens*/
#media screen and (max-width : 350px){
/* reduce padding */
header nav a{padding:.7em .7em; }
[role=main]{padding:1.5em 1.5em;}
/* make navbar vertical */
#nav_li{text-align: center;
border-bottom: 1px solid #eee;}
#nav_li, #navbar_a{width: 100%;}
HTML:
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='testimonials.html'>Testimonials</a></li>
<li id='nav_li'><a id='nav_a' href='contact.html'>Contact </a></li>
</ul>
By Default UL Element Take some padding from left. You need to add below css to resolve this:
#navbar {
padding: 0px;
}
I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.
HTML
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
CSS
nav
{
height: 30%;
width: 100%;
}
nav ul
{
height: 100%;
margin: 0px;
}
nav ul li
{
height: 33%;
width: 100%;
vertical-align: middle;
}
you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%; /* needed for demo */
}
nav {
height: 50%; /* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
edit
If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):
body,
html {
height: 100%;
}
nav {
height: 70%; /* height set for snippet demo purpose, could be really too much */
width: 100%;
}
nav ul {
height: 100%; /* will follow height, inherit height value , set in nav if any avalaible */
margin: 0px;
}
nav ul li {
height: 33%;
/* see me and my center*/
box-shadow: inset 0 0 0 1px;
background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}
nav ul li:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
a {
display: inline-block;
vertical-align: middle;
}
<nav>
<ul>
<li>Login
</li>
<li>Register
</li>
<li>Programmes<br/> Offered
</li>
</ul>
</nav>
If you can use flexbox, you can get away with the following css:
CSS
ul li a {
display:flex; // Enables flexbox
justify-content: center; // Center on main axis
align-items: center; // Center on cross axis
}
Update ( using auto margins )
You can also do it like this:
ul li { display:flex }
li a { margin: auto }
/* These rules are just to make things easier to see. */
nav {
margin: 0 auto;
margin-top: 5rem;
border: 1px dotted green;
width: 100%;
}
ul {
padding: 0;
display: flex;
justify-content: space-around;
}
li {
height: 3rem;
padding: 2rem;
border: 1px dotted red;
}
/* Here are what I am trying to illustrate */
ul li {
display: flex;
}
a {
margin: auto;
/* or adjust them one by one, by targeting
the ones you want and setting
using each margin like this:
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
*/
}
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
vertical-align aligns inline elements with their siblings.. unless used in a table cell.
I don't think there's a by-the-book way of vertically aligning.. but this should work:
D E M O
nav ul li
{
background:#f1f1f1;
height: 33%;
width: 100%;
border-top:1px solid #e0e0e0;
}
nav ul li a
{
display:block;
position:relative;
top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
}
Have you tried with
nav ul li a
{
height: 33%;
width: 100%;
vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)
}
Your text is within the a tag, so adding a in the css may solve your problem :)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can we center those divs “IE7 and up” with variable width horizontally without using inline-block?
I am trying to create a menu which has a background image spanning the full width of the screen with the menu contents constrained to 980px in the middle with the menu contents then aligned within the center of that.
Like this: http://d.pr/i/eYcV
But I don't want to constrain the area anymore than 980px as the menu items may increase in the future.
I have the following structure in HTML:
<div class="menu">
<nav class="primary_menu">
<ul id="menu-primary">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>
</div>
With the following CSS:
/* Menu */
.menu{
background: url("images/menu_bg_home.jpg") repeat-x;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
}
.primary_menu ul li{
float: left;
}
Thanks
There're a lot of ways to achieve what you're asking for ... simplest is by using inline-blocks like this
.primary_menu ul{
text-align: center;
}
.primary_menu ul li{
/*float: left;*/
display:inline-block;
margin: 0 20px;
*display : inline; /* for IE7 and below */
zoom:1;
}
Check my answer here : Can we center those divs "IE7 and up" with variable width horizontally without using inline-block?
Changing your .primary_menu li's from float: left to display: inline-block should get the menu items center aligned
try this demo or this demo2
.menu{
background:#ccc;
padding:10px;
}
.primary_menu{
background:#999;
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
}
.primary_menu ul{
text-align: center;
list-style-type: none;
margin:0px;
overflow:auto;
}
.primary_menu ul li{
float: left;
line-height:4;
padding:5px;
}
Working jsFiddle - take a look:
http://jsfiddle.net/dane/FyThW/21/
/* Menu */
.menu{
background-color: gray;
height: 70px;
}
.primary_menu{
display: block;
margin: 0px auto;
width: 980px;
height: 70px;
background-color: lightgray;
}
.primary_menu ul{
list-style-type: none;
text-align: center;
}
.primary_menu ul li{
display: inline-block;
}
I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out:
Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
This basically says that there wont be anything beside #header and
#content
Also #header #header h1 #header #nav #content will all be
floated to the left.
And #wrap basically centers itself.
#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content of course.
And if you want to use #wrap you should know that it should be the width of your widest element(s)