...

View Full Version : Centering div/ul's



comport9
11-18-2012, 02:58 AM
I have ul "boxes" that are floated left, so they appear next to each other, and fall under each other when the screen size is reduced, ensuring they are never off-screen. However, what I can't get is how to have the centered. They are always left-aligned.

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test2.css" />
<title>
test
</title>
</head>
<body>
<div id='wrapper'>
<ul class='ul'>
<li class='link'>One1</li>
<li class='link'>One2</li>
<li class='link'>One3</li>
<li class='link'>One4</li>
</ul>
<ul class='ul'>
<li class='link'>One5</li>
<li class='link'>One6</li>
<li class='link'>One7</li>
<li class='link'>One8</li>
</ul>
<ul class='ul'>
<li class='link'>One9</li>
<li class='link'>One10</li>
</ul>
<ul class='ul'>
<li class='link'>One11</li>
<li class='link'>One12</li>
<li class='link'>One13</li>
<li class='link'>One14</li>
</ul>
<ul class='ul'>
<li class='link'>One15</li>
<li class='link'>One16</li>
<li class='link'>One17</li>
<li class='link'>One18</li>
</ul>
</div>
</body>
</html>


Style:


.ul {
float: left;
margin: 0 auto;
width: 400px;
height: 250px;
border: 1px solid red;
}


I know if I give the div an absolute width, say 1200px, it'll be centered to the width. However, doing that prevents the ul's from shifting according to screen size. "width: 100%" doesn't work. Any suggestions? Or is this impossible? Thanks!

sunfighter
11-18-2012, 05:19 AM
You need to do a reset and then use text-align:center;


<style type="text/css">
/* we start with the reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ul {
float: left;
margin: auto;
width: 400px;
height: 250px;
border: 1px solid red;
text-align:center; // add this
}
</style>

comport9
11-18-2012, 06:29 AM
Nice try. But it's still not working. I don't want the text within the ul's to be center aligned, I want the "boxes" themselves to be center aligned.

As long as the white-space (margins...?) to both sides is unequal and/or the "boxes" don't realign themselves automatically with a smaller view port, it's not what I want. :(

Excavator
11-18-2012, 09:35 AM
Hello comport9,
Looks like you and Windbrand (http://www.codingforums.com/showpost.php?p=1292963&postcount=5) are in the same class?

Your ul's are left aligned because that's what you told them to do. You can't center them and float them left, not without some margin or padding to push them toward the center and then that messes up the layout when they drop.

Look at that solution for Windbrands question, or this -
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#wrapper {
padding: 10px 10px 50px;
text-align: center;
background: #333;
}
.ul {
width: 400px;
height: 250px;
display: inline-block;
text-align: left;
border: 1px solid red;
}
</style>
<title>test</title>
</head>
<body>
<div id='wrapper'>
<ul class='ul'>
<li class='link'>One1</li>
<li class='link'>One2</li>
<li class='link'>One3</li>
<li class='link'>One4</li>
</ul>
<ul class='ul'>
<li class='link'>One5</li>
<li class='link'>One6</li>
<li class='link'>One7</li>
<li class='link'>One8</li>
</ul>
<ul class='ul'>
<li class='link'>One9</li>
<li class='link'>One10</li>
</ul>
<ul class='ul'>
<li class='link'>One11</li>
<li class='link'>One12</li>
<li class='link'>One13</li>
<li class='link'>One14</li>
</ul>
<ul class='ul'>
<li class='link'>One15</li>
<li class='link'>One16</li>
<li class='link'>One17</li>
<li class='link'>One18</li>
</ul>
</div>
</body>
</html>

comport9
11-18-2012, 03:10 PM
Thanks man! I think this is actually working. :) No, I don't know who "Windbrand" is and I'm not in any class. Just seems to work out that way. :)

One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?

Thanks again!

Excavator
11-18-2012, 03:25 PM
One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?





It's because of the different height, when those ul's break to the next line they take the next space available. The only way I know to fix that is to have all the uls be the same height.

comport9
11-18-2012, 06:33 PM
But I've specified a height in the css for them... I'm sure I can simply write a bit of code that adds some extra empty li elements, but that feels kinda like a hack.

Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.

Excavator
11-18-2012, 07:32 PM
Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.


.ul {
width: 400px;
height: 250px;
display: inline-block;
text-align: left;
border: 1px solid red;
overflow: auto;
}


(Had to use html markup of a space).
I think this is also a hack and unnecessary.

Excavator
11-18-2012, 07:52 PM
You will probably want to know this little trick (http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html) also.

comport9
11-18-2012, 08:51 PM
Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it. Although they are lined up now. lol.

Edit: Just read the "little trick" you mentioned. Pretty funny. Luckily I don't care to support out-dated browsers at all. :)

Excavator
11-18-2012, 09:56 PM
Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it.

Let's have a look at the most recent version of your code.

comport9
11-18-2012, 10:40 PM
Alright, overflow "does" work on my test bed. However, using it on my site didn't work. After some testing I realized it's because I have a button whose borders I've put outside of the ul box. The portions of the button that are outside of the box are cut off, and then a scroll bar is made inside the box.

Excavator
11-18-2012, 10:55 PM
If you set your height and you have overflow, you get a scroll bar. You can always use overflow: hidden; to get rid of the scroll but you also lose the content.

The solution is to make sure your content fits in its container.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum