JSFiddle
HTML
<div id="geometric-nav" class="left template-column cfix template-column-2" sort_key="nav">
<div class="geometric-nav-wrap cfix" style="
">
<ul id="geometric-nav-links" class="nav-links expandable">
<!-- page links are appended to this element -->
<li class="page page-896547 page-work" page_id="896547" nav-link="true" nav_link_tmpl="true" style="display: none;">
<div class="nav-link-container">
Gallery</div></li><li class="page page-896549 page-custom first-child" page_id="896549" nav-link="true" nav_link_tmpl="true">
<div class="nav-link-container">
About</div></li><li class="page page-896548 page-custom last-child" page_id="896548" nav-link="true" nav_link_tmpl="true">
<div class="nav-link-container">
Contact</div></li><li class="page page-896551 page-resume" page_id="896551" nav-link="true" nav_link_tmpl="true" style="display: none;">
<div class="nav-link-container">
Resume</div></li></ul>
</div> <!--#geometric-nav-wrap-->
</div>
CSS
#geometric-nav {
background: #222;
height: 40px;
width: 100%;
margin-top: 10px;
}
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
float: left;
list-style: none;
}
This solution treats the li items as inline-block elements and uses the ul container to center the elements.
added:
text-align: center
to #geometric-nav
and
display: inline-block
to .template-column-2 #geometric-nav-links li
http://jsfiddle.net/gZB6Y/
google would have helped you ;)
You can use :table; for ul and reset margin to auto; it will shrink on it's content and will center:
.template-column-2 #geometric-nav-links {
display:table;
margin:auto;
}
DEMO
Or set display:inline-block to li and text-align:center to ul
DEMO 2
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
display:inline-block;
list-style: none;
}
.template-column-2 #geometric-nav-links {
text-align:center;
}
Or set display:inline-block to ul and text-align:center to #geometric-nav.
DEMO 3
#geometric-nav {
background: #222;
height: 40px;
width: 100%;
margin-top: 10px;
text-align:center;
}
.template-column-2 #geometric-nav-links li {
margin-left: 15px;
float: left;
list-style: none;
}
.template-column-2 #geometric-nav-links {
display:inline-block;
}
Related
I want the elements of a navbar to be on the center, I have the following html:
<div class="navbar navbar-default navbar-fixed-bottom" style="bottom:50px; background:none; border:0px; box-shadow:none;">
<div class="navbar-inner" style="float: none;">
<div class="container-fluid" >
<ul class="nav navbar-nav" >
<li><img class="social-media" src="images/facebook.png"></li>
<li><img class="social-media" src="images/twitter.png"></li>
<li><img class="social-media" src="images/linkedin.png"></li>
</ul>
</div>
</div>
</div>
and here is my css:
.social-media {
opacity: 0.4;
margin-left: 15px;
width: 32px;
height: 32px;
}
.social-media:hover {
opacity: 1;
margin-left: 15px;
width: 32px;
height: 32px;
}
I tried to use text-align:center; on navbar inside the html but it didnt work. Any idea how can I solve this?
I've tried to change the bootstrap.css to
#media (min-width: 768px) {
.navbar-nav {
float: none;
margin: 0 auto;
float: none;
width: 100%;
}
.navbar-nav > li {
float: none;
text-align: center;
}
and now I have this:
after editing bootstrap.css to :
.navbar-nav {
margin: 0;
display:inline-block !important;
float:none !important;
}
I finally got:
i think you need to set the float:none; on UL and text-align:center; on parent of UL
try the below css on UL and
*remember I am considering bootstrap 2.3.2 version NOT v3.X (if any not sure) if u are using other version let me know.. *
.navbar-nav {
display:inline-block !important;
float:none !important;
}
.container-fluid {
width: 100%;
text-align:center;
}
check the below bootstrap sample
If you have set .navbar-nav li as inline-block, add text-align:center to .navbar-nav, this will position your icon in the center of navabar.
.navbar-nav{
text-align:center;
}
.navbar-nav li{
display:inline-block;
}
Try this:
.navbar-nav {
width: 100px;
margin: 0 auto;
}
.container-fluid {
width: 100%;
text-align: center;
}
By setting the left and right margins to auto, you are telling it to make both margins the same, which will center it. Do not remove the text-align: center.
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page.
i tried margin:0 auto but it wont work
here is my code:
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</div>
Change your last two CSS rules to:
li {
display:inline-block;
}
#menu {
background-color:#98bf21;
text-align:center;
}
jsFiddle example
margin: 0 auto; only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.
Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Good luck!
Use the inline-block css magic :)
JSFiddle
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
I had the same problem until I read this post and decided to center the text in the "nav".
So basically your ul should be in a nav so you can text-align: center the nav area.
nav {
width: 75%;
margin: auto
}
#menu {background-color: #98bf21}
.container{padding: 0.10em}
.cell-row {display:table; width:100%}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
a:link, a:visited {
font-weight: bold;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {background-color: #7A991A}
#media (max-width: 500px) {
.mobile {
display: block;
width: 100%;
text-align: center
}
nav {
width: 100%;
margin: auto
}
}
<nav>
<div id="menu" class="cell-row" style="text-align: center">
<div class="container cell cell-middle mobile">Home</div>
<div class="container cell cell-middle mobile">News</div>
<div class="container cell cell-middle mobile">Articles</div>
<div class="container cell cell-middle mobile">Forum</div>
<div class="container cell cell-middle mobile">Contact</div>
<div class="container cell cell-middle mobile">About</div>
</div>
</nav>
Add the following css:
ul {
margin: 0 auto;
display: inline-block;
}
This will make the ul fit its contents and then be centered in its container.
I'm trying to achieve something quite tricky in CSS, but also quite "simple" :
Explanation:
Some element with text inside it (unknown width) with 2 elements on each side of it, both occupying the remaining space.
I thought of going with display:table for the container and for the 3 children going display:table-cell but it just doesn't work, or I don't know how to use it properly..
Demo playground
HTML
<header>
<h1>Some title</h1>
</header>
CSS
header{
display:table;
text-align:center;
width:50%;
}
header:before, header:after{
content:'';
display:table-cell;
background:red;
width:50%;
border-radius:5px;
}
header > h1{ white-space:pre; padding:0 10px; }
This is using display: table and display: table-cell to make this bar and text.
HTML
<div class="textBarContainer">
<div class="textBarBefore"></div>
<div class="textBar">Text</div>
<div class="textBarAfter"></div>
</div>
CSS
.textBarContainer {
display: table;
width: 100%;
}
.textBar {
display: table-cell;
padding: 0 10px;
white-space: pre;
}
.textBarAfter, .textBarBefore {
background: #cc0000;
width: 50%;
height: 20px;
display: table-cell;
content:' ';
border-radius: 5px;
}
Demo
<ul class="columnlayout">
<li>
<div>Left content</div>
</li>
<li class="centercontent">
<div>middle text content</div>
</li>
<li>
<div>Right content</div>
</li>
</ul>
//columns layout
ul.columnlayout
{
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
> li
{
float:left;
margin:0;
list-style-type:none;
width:200px;
&.centercontent
{
width:auto;
}
ul.xoxo
{
list-style-type: none;
li
{
list-style-type: none;
}
}
}
}
oh, pardon my .scss!
ul.columnlayout {
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
}
ul.columnlayout li {
float:left;
margin:0;
list-style-type:none;
width:200px;
}
ul.columnlayout li.centercontent {
width:auto;
}
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}