Geek asks and answers

The center blocks of the div, but not in the last line

I am really stuck in trying to keep div blocks centered except for the last line.

Someone has already created this fiddle that demonstrates my question. You can see how the blocks in the results pane remain centered even when the window is resized. I would like to have similar behavior, but if the last line contains fewer blocks than the lines above, then this last line should not be centered, but aligned left.

Here is the fiddle: http://jsfiddle.net/zbbHc/1/

Some might ask why I'm not just using float: left. The problem is that I could not find a way to center my blocks with this method without also specifying a fixed width for my wrapper. I try to keep everything as lively as possible.

+5
source share
4 answers

Try this script http://jsfiddle.net/zbbHc/45/

Not sure, but I think this is the maximum we can do using only CSS.

Update: (This will not work in all cases, check the code that works in all cases [I think])

HTML

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB hide"></div>
    <div class="iB hide"></div>
</div>

CSS

.wrapper {
    width: 100%;
    background: red;
    text-align: center;
    text-align-last: left;
}

.iB {
    display:inline-block;
    width: 200px;
    height: 100px;
    background: green;
}
.iB.hide {
   visibility:hidden; 
}

Here is a quick and dirty method using jQuery. This will automatically add invisible elements.

Spell http://jsfiddle.net/fD6fn/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
    width: 100%;
    background: red;
    text-align: center;
    text-align-last: left;
}

.iB {
    display:inline-block;
    width: 200px;
    height: 100px;
    background: green;
}
.iB.hide {
   visibility:hidden; 
}
​
</style>
</head>

<body>
<div class="wrapper" id="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
    itemWidth = "200",
    count = "",
    itemCount = 7; 

    count = $wrapper.width()/itemWidth;

// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}



function addInvisibleElements() 
{
    // Delete invisible items
    $("#wrapper .iB.hide").remove();


    var c = findHiddenElementCount();

    for(var i = 0; i < c;i++)
    {
        $("#wrapper").append('<div class="iB hide"></div>');
    }

}

$(window).bind("resize",addInvisibleElements); // resize handler

$(document).ready(addInvisibleElements); // take care during page load

</script>
</body>
</html>
+2
source

"" , , ? , , , ( ..).

.iB:last-child{
   position:relative;
   left:-100px;
   background:blue;
}

http://jsfiddle.net/zbbHc/54/

0

, ( ). (, / ). ( ) divs ( div ).

The width of the table would be fluid, because it would be based on the width of the widest cell (that way, the blocks will line up nicely and look very neat), and you can hard code or script (of course, I suggest creating scripts) style / method to check if the last line contains fewer blocks, and if necessary, to set the text alignment to the left for this cell.

This solution could probably use some improvement, but it might be a good start, depending on what you are going to use for this.

0
source

More articles:


All Articles