JSBIN
I want to center the number row, but its parent has fixed attribute and I don't want to javascript to calculate the number row position. Is there anyway to achieve with pure CSS?
I have try as follow:
use margin: 0 auto, not successful, perhaps the reason is no width.
use text-align: center, not successful, perhaps the number row is not inline element.
Thanks a lot :)
Remove float:left from your li and add display:inline-block then use text-align:center on the ul.
#menu{
position: fixed;
top: 0;
left: 0;
width: 100%;
border:1px solid #f00;
z-index: 99;
ul{
width: 100%;
margin: 0 auto;
text-align:center;
padding: 0;
list-style-type: none;
li{
display:inline-block;
a{
display: inline-block;
width:32px;
height: 32px;
text-align: center;
font-family: "Microsoft YaHei";
font-size: 1.5rem;
line-height: 180%;
text-decoration: none;
border-radius: 50%;
}
}
}
.active{
a{
background-color: rgba(255,255,255,0.7);
}
}
}
Related
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
So, i'm trying to center three of my divs on the page, #header, #nav, and #headerImg. I can't seem to center my #header and #nav divs using margin: 0 auto; though. They seem to be stuck to the left side of my page when I refresh the page.
Here is my style.css for my page:
div#header{ //I only have one image here.
position:absolute;
padding: 10px 20px;
width: 960px;
height: 49px;
top: 0px;
background-color: #2E5E8D
}
div#nav{ //I have 4 links here
position:absolute;
margin: 0 auto;
padding: 10px 20px;
width: 960px;
height: 20px;
top: 69px;
background-color: #2E5E8D
}
div#headerImg{ //I have one image here,
position: relative;
display: block;
margin: 0 auto;
width: 1000px;
top: 95px;
}
div#content{
position:relative;
top:109px;
width:1000px;
display: block;
margin: 0 auto;
}
div#content a{
color: blue;
text-decoration: none;
}
#content a:hover{
color: red;
text-decoration: underline;
}
#content dt{
margin-top: 10px;
}
div#footer{
position: relative;
margin: 0 auto;
top: 109px;
background-color: #333333;
color: white;
text-align: center;
font-size: 14px;
width: 1000px;
padding: 10px;
}
The width on my #header and #nav have to be set to 960px as per instructors request, and I'm sure he wanted the image inside my #headerImg to be inside my #header div, but i couldn't get the image from overlapping. Therefore, that's the only div of the 3 that I can center.
I tried using margin: 0 auto; and display: block on both but they don't seem to work. I tried using margin: 0 10% which seemed to work on my computer, but it is misaligned on another computer. My comments in the code are just to show what I have in the div.
Try add div#header and div#nav the following rules:
margin-left: -500px;
left: 50%;
How do I center this menu in css? I have tried left: 50% or text-align: center but nothing works. Do you guys have any idea?
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
Thanks in advance
CSS:
#navigation {
margin: 0;
width: 100%;
height: 50px;
background: url(navigation.jpg);
padding: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
text-align:center;
}
#navigation ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navigation li {
float: left;
border: 0;
list-style:none;
}
#navigation a {
margin: 0;
display: block;
height: 30px;
padding: 20px 20px 0px 20px;
background: none;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
border: none;
}
#navigation a:hover, #navigation #current a {
background: url(button.jpg);
text-decoration: none;
color: #000;
}
Have you tried:
#navigation ul {margin:0 auto;}
on your #navigation ul element?
You can try this:
#navigation {
text-align:center;
}
#navigation ul {
display:inline-block;
}
wrap your content in a container, set a width and use margin:auto
EDIT
Ok this is a bit of a mess, is there a reason you are absolute positioning the header? Your ul does not need position: relative and your li's should be using display:inline-block instead of float.
JSFIDDLE
Your #navigation element has width:100%; so that block level element takes the entire screen. You can try to center it's children with text-align: center;.
Try settings a specific width on your #navigation ul and then apply margin: 0 auto; text-align:center;.
Depending on what you're going for, it may be better to do #navigation li{ display: inline-block;} instead of float: left
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue
html
<ul class="tabs-bottom">
<li>Booking</li>
<li>Special Offers</li>
</ul>
css
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: inline-block;
text-align: center;
}
demo
I can do this with display table-cell but I strongly searching for with display inline-block
here is working demo with display table-cell demo
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
border-spacing: 10px 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
If you are ok with other display property, you can use diaplsy:table-cell like this
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align:middle;
}
This is the complete css you need to have it working.
This also handles very long texts, which wrap around (multi-line link texts):
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
line-height: 50px;
background: #000;
display: inline-block;
text-align: center;
}
.tabs-bottom li a
{
line-height:16px; /*This is in place, to prevent inheriting the li's line-height*/
display:inline-block;
vertical-align: middle;
}
You can test it in this fiddle:
http://jsfiddle.net/vVnR5/
Notice
jsFiddle doesn't seem to work in IE 7 and 8, so i couldn't test it.
If they're only ever going to be one line, you can center them with line-height,
.tabs-bottom li{
width: 216px;
height: 55px;
line-height:55px
background: #000;
display: inline-block;
text-align: center;
}
It's trickier if you want a multi-line center, but it can be achieved using display:table-cell;
EDIT Here is a version where it will center regardless of number of lines http://codepen.io/robsterlini/pen/btqjv but remember that it will default back to appearing at the top for IE7 and below (see here).