I have a simple ul horizontal menu that exists within a div that is set to 10% height and 100% width. How does one center text horizontally and vertically within it?
#navlistcontainer {
position:fixed;
height:10%;
bottom:0px;
left:0px;
right:0px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a {
color:#FFF;
}
<div id="navcontainer">
<ul id="navlist">
<li>START</li>
</ul>
</div>
try this:
#navlist {
text-align: center;
display: block;
}
#navlist li {
display: inline;
}
For vertical alignment you'd need to set the line-height of navlistcontainer equal to it's height. I'm not sure it will work with height in percentage. Consider this:
#navlistcontainer {
height: 50px;
line-height: 50px;
}
Here is a jsFiddle: http://jsfiddle.net/FH9sZ/
You shouldn't define height as precentage.
http://jsfiddle.net/zzdGx/ there you go fiddle for this.
Related
I'm just starting to develop in HTML and CSS, and despite reading about the box model I am still having trouble with some of the basics of positioning.
I want to create a header navigation bar with three elements - one to the left of the page, one to the right, and one in the center. I want these elements to be inline with each other.
At the moment, they are represented in HTML like so
<body>
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I have then attempted to align them using the 'text-align' property in CSS.
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
}
.header > ul > li {
display: inline-block;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
However, instead of the expected result it produces this.
The three items are aligned, next to each other, on the left.
Can anyone recommend what css property I should be using to solve this problem? My research has shown there are ways of using float, but other people recommend against it, and when I try I get issues with the text overflowing off the page.
If you give the ul and lis a width and (100 ul /30 for li s for example) then they should display correctly
.header {
background-color: #ffd9e7;
border: black;
display: block;
box-sizing: border-box;
}
.header ul {
display: inline-block;
width:100%;
}
.header > ul > li {
display: inline-block;
position:relative;
vertical-align:top;
width:30%;
}
#lodestone {
text-align: left;
}
#user {
text-align: right;
}
#mogstation {
text-align: center;
}
<div class="header">
<ul class="child">
<li id="lodestone">The Lodestone</li>
<li id="mogstation">The Mog Station</li>
<li id="user">User Account</li>
</ul>
</div>
I added vertical-align:top; but it's excess to requirements, you could take that out..
Fiddle
Hope this helps
Take a look at CSS Flexbox for a different approach to layout your elements
header{
display: flex;
justify-content: space-around;
}
<header>
<div>A</div>
<div>B</div>
<div>C</div>
</header>
Why not make the li elements a third of the width?
First make the ul 100% width, you'll also need to ensure there's no padding on the right of the ul as it tends to be automatically added by browsers:
.header ul {
display: inline-block;
padding: 0;
width: 100%;
}
Then have each li 33%
.header > ul > li {
display: inline-block;
width: 33%;
}
Style the rest as required
I want my image to be horizontally aligned on the same line no matter what the view port of the user is my html is :
<div id="image_slider">
<ul>
<li><img src="img/1.jpg" id="1"/></li>
<li><img src="img/2.jpg" id="2"/></li>
<li><img src="img/3.jpg" id="3"/></li>
</ul>
</div>
I was trying to to align them so in first try:
img{
width:1200px;
float:left;
padding:0px;
margin:0px;
}
#image_slider ul,#image_slider li ,#image_slider,#container{
display:block;
}
And in the other try:
#image_slider ul,#image_slider li ,#image_slider,#container{
display:inline-block;
}
I changed to inline block but image still not as intended when resizing browser to smaller view port
Here is a Jsfiddle
You can use display:inline-block, but also add white-space:nowrap:
#image_slider ul, #image_slider li, #image_slider, #container {
display:inline-block;
white-space:nowrap;
}
jsFiddle example
Try this... and for horizontal use display:inline, block is vertical.. inline-block is for both. Also remove the set img width and let the parent container handle it.
li {
display: table-cell;
position: relative;
}
#image_slider {
width:1200px; /*set width slider*/
}
#image_slider ul {
width: 100%;
display:block;
}
#image_slider ul li {
display:inline-block;
float:left;
width: 25%;
}
#image_slider ul li img {
width:100%;
}
try this css
#image_slider ul li {
float: left;
width: 20%;
}
or
try this css
#image_slider ul li {
display:inline-block;
}
So my html is this:
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
and my CSS is this:
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
Now, this does create an inline bar except no matter how much I change the width and height of
#navigation ul li
the background color (red) just stays strictly around the letters and nothing else. It seems as if the width and heights of the actual li's are not changing no matter what number I change it to. Any idea why it is doing this?
Use display:inline-block instead or display:inline.
#navigation ul li {
display: inline-block;
}
jsFiddle here
Alternatively, you can also float the elements for a similar effect:
#navigation ul li {
float:left;
}
jsFiddle here
Aside from both of the above solutions, if you wanted to use display:inline, you could just add padding as opposed to trying to set a height/width.
#navigation ul li {
display:inline;
padding:20px;
}
jsFiddle here
I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:
<div class="menu">
<div class="ct-header-line"></div>
<img class="logo" src="images/clinictechlogo.png">
<ul class="nav">
<!--common features, coded? or static?-->
<li class="active">Home</li>
<li>Appointments</li>
<li>Prescriptions</li>
<li>Patient Records</li>
<li>Bills</li>
<!--special features, coded.....-->
<li>Charts</li>
<li>something</li>
</ul>
</div>
And here's the some of the CSS for the header part:
.logo {
padding: 20px 10px 10px 10px;
display: inline;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
list-style:none;
margin:0;
}
.nav li {
display: inline;
}
The result is that the logo appears on one line, and the ul nav appears on the next...
You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.
Try adding to the logo:
.logo {
float: left;
width: 20%; //Or whatever the width is
}
This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the
.nav {
float: left;
width: 70%;
}
Check this one: Inline Logo and Nav
just float both the .logo and .nav to left and have clear fix at the bottom.
.logo {
padding: 20px 10px 10px 10px;
display: inline;
float:left;
}
.menu {
background: #4F97BD url(images/headerbg.jpg) repeat;
}
.nav {
padding: 20px 10px 10px 10px;
list-style:none;
margin:0;
float:left;
}
.nav li {
display: inline;
}
.clear{
clear:both;
}
To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..
hope this helps
Merx..
Try this...
.logo {
margin:0;
padding:0;
display:inline;
}
Take a look http://jsfiddle.net/vZZDJ/
Good Luck...)
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }