I need to design a menu, in which the menu is always centered, with variable number of items, browser resolutions, and the items would be aligned to the left (menu centered in the page, but items aligned to the left).
(As you can see it is not centered at all).
This is my code:
<html>
<head>
<style type="text/css">
.extPanel{
background-color:#555;
padding: 0px 20% 0px 20%;
display: table;
}
.split{
clear: both;
}
.menuElement{
float:left;
background-color:#aaa;
margin: 0px 20px 20px 0px;
width: 200px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="extPanel">
<div class="menuElement">item1</div>
<div class="menuElement">item2</div>
<div class="menuElement">item3</div>
<div class="menuElement">item4</div>
<div class="split"></div>
External Panel. 20% left and right padding.
</div>
</body>
</html>
As you can see, the external div has 20% padding in order to center the items. Items float to the left. Items are not centered at all because a remaining space exists in which item4 doesn't have enough space, so it floats to the next line.
And if the menu would have only one menu item, this item float to left so is more obvious that the menu is not centered. If I try to use some style to center all the items (text-align or something like this), item4 would appear centered below item2, and I need that the items are align to left.
I need:
Menu to be centered in the page, with any number of items
Items centered
Cross-browser compatibility (to IE8 at least, and mobile explorers)
No JavaScript
Try using display: inline-block;.
You can add the following code:
.extPanel {
text-align: center;
}
.menuElement {
display: inline-block;
*display: inline; //ie
zoom: 1; //ie
//remove float: left;
}
instead padding, you could simply use margin and inline-block for childs.
http://codepen.io/anon/pen/quByg
.extPanel {
margin:0 20%;
text-align:justify;
}
.menuElement {
display:inline-block;
width:200px;
height:200px;
margin:0 20px 20px 0;
border:solid;
}
You want to set text-align: center; on the surrounding body. Then .extPanel needs a margin: 0 auto;
http://jsfiddle.net/markdelorey/ttZgZ/
I found the solution by combining all your answers.
You can found it here:
http://codepen.io/anon/pen/odhrp
I used diffent IE hack here:
http://codepen.io/anon/pen/flEsm
As you can see, works with one element, two, three... When items menu don't fit in extPanel max width, items goes to next line, align to left, and menu is still centered.
.extPanel {
background-color:#555;
text-align:center;
display: table;
margin: auto;
max-width: 80%;
text-align: justify;
}
.menuElement {
display:inline-block;
width:200px;
height:200px;
margin:20px 20px 0;
border:solid;
text-align: center;
}
And text-justify: distribute solve the problem with text-align: justify in IE.
Related
I'm trying to make this:
I want the purple div to align to the right of the last word on the green div.
i've had some success with display:flex; but the green div won't remove the whitespace from the floated purple div.
.titlebox{
display: flex;
justify-content: center;
text-align:center;
}
.title{
font-size: 55px;
background: green;
}
.subtitle{
position: relative;
float: right;
background: purple;
font-size: 30px;
}
<div class="titlebox">
<div class="title">
THIS IS SOME CENTERED TEXT rertert ert ret erterterter
<br/>
<div class="subtitle">This text is right aligned to the right of the centered text</div>
</div>
</div>
(looks like this:)
I tried position:absolute; right:0; to get rid of the whitespace created by the float, but the purple div sticks to the right of the window instead of the right of the parent div (.title)
I've tried a few other things involving pseudo elements and extra divs, i tried using display:grid; but resizing the window moved the right aligned text from the edge of the centered text (same problem with tables) but I've been at this for a few hours now and it's driving me mad. i can't even remember what i have and haven't tried.
the problem is, if the window is resized to be shorter than the green div's text, often times it would mess up any extra elements background (which i want to fill) as the text div increased size, especially if fixed sizes are used.
Does text-align: right; instead of float: right; on .subtitle give you the result you're after?
.titlebox {
display: flex;
justify-content: center;
text-align:center;
}
.title {
font-size: 55px;
background: green;
}
.subtitle {
text-align: right;
background: purple;
font-size: 30px;
}
Your position: absolute; suggestion is also a workable solution by the way, you however need to make the containing element .titlebox position: relative;
I have a footer made up of a few lists. I put each list in a div, and floating them so that the lists are horizontally next to each other. The text in each list is center aligned.
Now I'd like to center align all those divs! How can I do this? They are wrapped in a footer tag, but since the divs are floating, text-align:center; won't work.
Any ideas?
Thanks!
My CSS looks like this right now:
.footer{
height:180px;}
footer li{
list-style-type:none;
padding:0.2em 1em 0.2em 1em;
text-align:center;}
.section{
float:left;
margin-bottom:2.5em;
padding-top:0.8em;
margin-left:2em;}
To center an element, it'll typically need margin: 0 auto as stated in another answer.
If you want more elements within your container to center within the container, you should not be floating them. Floating them takes them out of the layout flow. You'll just want to make them display: inline-block.
* {
padding: 10px;
text-align: center;
}
footer {
background: #ddd;
}
.item {
display: inline-block;
background: #999;
width: 20%;
}
Example:
http://codepen.io/anon/pen/RKQJNa
.footer {
margin: 0 auto;
}
This should align the footer in the centre
I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.
child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.
The correct way to do this would be the following:
#child {
margin: 0 auto;
}
This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.
This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:
#parent {
text-align: center;
}
You could set the margins to: margin: 0, auto;
For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:
See working jsFiddle demo
HTML
<footer>
<div class="dynamic-content">Here is some child dynamic content</div>
</footer>
CSS
body
{
background: #ccc;
}
footer
{
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #232323;
}
footer .dynamic-content
{
flex: 1;
padding: 10px;
margin: 0 auto;
background: #545454;
color: white;
font-family: verdana;
}
Centering a div using CSS:
HTML:
<div class="center">
.... more content ....
</div>
CSS:
.center {
margin: 0 auto;
}
OR
.center {
margin-left: auto;
margin-right: auto;
}
The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.
Try in jsfiddle
Make it display as an inline element and give the parent the property of text-align center
problem solved
#parent{
text-align:center;
}
#child{
display:inline-block;
}
Edit:
check how it works http://jsfiddle.net/ECMau/1/
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
JS Fiddle: http://jsfiddle.net/F6R9C/
HTML
<div>
<span>
Visit website
View project
</span>
</div>
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
Another option would be to give the span display: table; and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.
Works even on <span> tags.
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
EDIT:
Adrift's answer is the easiest solution :)
only css div you can center content
div{
display:table;
margin:0 auto;
}
http://jsfiddle.net/4q2r69te/1/
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
Ok, so am I missing something but I can't seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.
What I'm trying to do is get grey boxes to line up in a row so that the first box's left hand edge is inline with left hand edge of the #wrapper div and the last box's right hand edge is inline with the #wrapper div's right hand edge.
I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I'm missing?
#wrapper {
width: 400px;
height: 300px;
background-color:#F0F0F0;
margin: 10px auto;
}
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
<div id="wrapper">
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</div>
I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).
Here's a fiddle demo!
The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.
ul {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
ul:after {
content: "";
display: inline-block;
width: 100%;
}
ul li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}
use :last-child to select the last box and apply margin-right: 0 to it. Make sure the remaining margins will fill the space properly.
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
.box:last-child {
margin-right: 0;
}
If you have to stick with a width of 92px you won't get them to align properly. The remaining space that the margins need to fill is 32px, which doesn't divide evenly by 3.
The first thing you need to do is remove the last element's right margin.
.box:last-child { margin-right:0; }
Beyond that, sometimes you don't have the ability to fit elements with, for example, exact even margins based on their space and the size of the container. Sometimes you can apply different margins on (for example) every-other element to keep the layout looking "even" but to handle the lack of space, something like:
.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/
In your case though, only one of the boxes needs extra margins, say, the first. Here's how I did it (with color contrast increased just to make it easier to see).
.box {
width: 90px;
height:90px;
background-color:blue;
margin:0px 13px 10px 0px;
float:left;
}
.box:last-child {
background:green;
margin-right:0;
}
.box:first-child {
background:yellow;
margin-right:14px;
}
Cheers
Your boxes with the margins were too large. Note that padding is in additional to the specified height and width. See it work on http://jsfiddle.net/37E55/32