hello i would like to know if it is possible to center a div without having a width. because of two different versions of a container depending from language settings with different widths i would like to center it dynamically.
margin: 0 auto;
is not working without any settings of width.
so the structure is simple:
<div id="container">
<div id="list">
<span class="up">text large</span>
<ul class="navigation">
<li>one</li>
<li>|</li>
<li>two</li>
<li>|</li>
<li>three</li>
<li>|</li>
<li>four</li>
</ul>
</div>
</div>
and the css:
.wrapper #container {
width: 960px;
clear: both;
margin: 0 auto;
}
.wrapper #container #list {
width: 420px;-->should be dynamically
margin: 0 auto; --> only works when setting width
}
.wrapper #container #list .up {
font-size: 11px;
float: left;
display: inline-block;
text-align: right;
display: inline;
}
.wrapper .navigation {
font-size: 10px;
margin-top: 15px;
float: left;
padding-left: 5px;
}
.wrapper .nav li {
float: left;
display: inline-block;
margin-left: 15px;
list-style: none;
}
so if there is someone who knows how to deal with that i really would appreciate.
thanks alot.
UPDATE:
thanks for answering this question for so far. using:
display: inline-block;
on that container that should be centered works great.
Use display: inline-block. See fiddle
.wrapper #container {
/* ... */
text-align: center;
}
.wrapper #container #list {
display: inline-block;
}
Related
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 have a problem. The answers to other people questions didn't solve my problem.
It's about image in my header, here's the code:
HTML
<div id="site">
<div id="header">
<img class="center" src="http://i.imgur.com/jfDhpP5.png"/>
</div>
<div id="mainNav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</div>
</div>
CSS
#container{
width: 1000px;
margin: 1em auto;
}
#header{
display: block;
width: 1000px;
margin: 0 auto;
}
body{
background-color: grey;
color: black;
font-family: sans-serif;
}
img.center{
text-align:center;
margin: 0 auto;
padding:0px;
}
I also try this:
div#pictures {
text-align: center;
}
also not working... checked in firefox and IE, the newest versions.... o.O
Please help!
CSS for header
width:100%;
text-align:center;
CSS for your img
display:inline-block;
margin: 0 auto;
See example here
That said, merely having text-align:center; on your header should be find, as in here
To add to SW4's answer, there are various ways to align text with CSS.
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.d {
text-align: justify;
}
For anyone looking for a great, getting started resource, one I'd recommend is W3Schools.
Thanks to SW4's answer I was having a similar problem with a header image. I was using a rectangular image and also trying to make it circular. After fixing the image shape and sizing I then had an issue with getting centered in the .
Here's my code...
HTML:
<div class= "image-cropper">
<img src="#" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
display:inline-block;
margin: 0 auto;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -15%; /*centers the image*/
height: auto;
width: 250px;
}
-- somebody may have a better way of coding it out but after several attempts and messing around with the px and % I finally got mine to look the way I intended.
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are
32px X 43px. How can I prevent from an inside text to extend the <li> elements?
And how can I make the text appear on the bottom left side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.
http://plnkr.co/edit/kcjCl1?p=preview
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
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 am having trouble getting this too work, for some strange reason the DIV's do align horizontally correctly but the second div ends up under the first one. Any help would be greatly appreciated.
HTML:
<footer>
<div class="inner">
<section id="footer-copyright" class="clear left">
<ul>
<li>© 2013
Company
|
Sitemap
|
Privacy Policy
</li>
</ul>
</section>
<section class="footer-box clear right">
<ul>
<li>Design by Template</li>
</ul>
</section>
</div>
</footer>
CSS:
footer .inner {
padding-top: 50px;
}
#footer-copyright {
display: block;
padding-top: 35px;
width:50%;
}
#footer-box {
display: block;
padding-top: 35px;
}
footer ul {
color: #FFFFFF;
list-style: none outside none;
padding: 10px 0;
}
.inner {
margin: 0 auto;
position: relative;
width: 1000px;
}
.clear {
clear: both;
display: block;
}
.right, .alignright {
float: right;
}
.left {
float:left;
}
Maybe I just need a fresh set of eyes... :)
You can view a working link here
It's because your footer-box has clear: both; rule set (from the clear class). Remove it and add padding-top: 35px.
#footer-box has clear: both due to its clear class, so it's clearing below the #footer-copyright.