Anthony O'Brien Anthony O'Brien - 14 days ago 6
CSS Question

Aligning <li> in <div> in <body> all to be centered?

jsut a quick question.

I am having trouble figuring out how to align the gallery icons into the centre of the screen. As you can see from the code snippet it is misaligned. Just to illustrate what I mean you can take a look at this:

Highlighted the misalignment

Anyone able to point me in the right direction?



* {
font-family: "Trebuchet MS";
}

/* BODY */

body {
background-color: #FFF6E5;
}

body hr {
width: 55%;
}

/*LOGO*/

#logo {
font-size: 4em;
text-align: center;
}

#logo p {
margin: 0px;
}

/* NAVBAR */

#navbar a {
text-decoration: none;
color: black;
}

#navbar {
text-align: center;
font-size: 1.4em;
}

/* CONTENT */

#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}

/* MENU */

#item {
float: left;
width: 30%;
margin: 5px;
}

#item img {
width: 100%;
}

#img-box {
width: 100%;
overflow: hidden;
border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
</head>

<body>
<!-- STYLE SECTION -->
<style type="text/css">
body {
font-family: "Aller", "sans-serif"; /* just a custom font */
}

a:-webkit-any-link {
text-decoration: none; /* ignoring default link settings */
}

ul {
list-style-type: none; /* hiding the bullets from ul */
}

.fade {
opacity: 0.8; /* sets default view to a 80% opacity */
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 1; /* sets default view to a 100% opacity when on hover state */
}

.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}

img {
border-radius: 0.4em 0.4em 0.4em 0.4em; /* radius should be the same as the img-wrapper */
}

.gallery-wrapper {
max-width: 1200px;
margin: auto;
}

.gallery-wrapper ul li {
display: inline-block; /* sit wrappers in rows, not column block */
}

h1 {
padding-left: 14em;
}

h4 { /* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}

.logo {
margin-left: 22em;
margin-bottom: 4em;
}
</style>

<div id="logo">
<p>GingeSwagProductions</p>
</div>

<div id="navbar">
<p>
<a href="index.html">Home</a> -
<a href="film.html">Film</a> -
<a href="photography.html">Photography</a> -
<a href="about.html">About</a> -
<a href="contact.html">Contact</a>
</p>
</div>

<hr>

<div class="gallery-wrapper">
<h1>Natalia - Photoshoot</h1>
<ul>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
</li>
<li>
<figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
</li>
</ul>
</div>


</body>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>

<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>

<footer></footer>
</html>




Answer

Try setting these properties to the ul element:

padding: 0;
text-align: center;

* {
    font-family: "Trebuchet MS";
}

/* BODY */

body {
    background-color: #FFF6E5;
}

body hr {
    width: 55%;
}

/*LOGO*/

#logo {
    font-size: 4em;
    text-align: center;
}

#logo p {
    margin: 0px;
}

/* NAVBAR */

#navbar a {
    text-decoration: none;
    color: black;
}

#navbar {
    text-align: center;
    font-size: 1.4em;
}

/* CONTENT */

#content {
    width: 30%;
    text-align: center;
    margin: auto;
    font-size: 1.05em;
}

/* MENU */

#item {
    float: left;
    width: 30%;
    margin: 5px;
}

#item img {
    width: 100%;
}

#img-box {
    width: 100%;
    overflow: hidden;
    border: 1px solid black;
}
<!DOCTYPE html>
<html>
    <head>
        <title>GingeSwag Productions</title>
        <link href="main.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css"/>
    </head>
    
    <body>
        <!-- STYLE SECTION -->
        <style type="text/css">
            body {
                font-family: "Aller", "sans-serif";  /* just a custom font */
            }
            
            a:-webkit-any-link {
                text-decoration: none;	/* ignoring default link settings */
            }
            
            ul {
                padding: 0;
                text-align: center;
                list-style-type: none;	/* hiding the bullets from ul */
            }
            
            .fade {
                opacity: 0.8;		/* sets default view to a 80% opacity */
                transition: opacity .25s ease-in-out;
                -moz-transition: opacity .25s ease-in-out;
                -webkit-transition: opacity .25s ease-in-out;
            }
            
            .fade:hover {
                opacity: 1;	/* sets default view to a 100% opacity when on hover state */
            }
            
            .img-wrapper {
                width: 300px;
                height: 200px;
                border: 0.1em solid #ccc;
                border-radius: 0.4em;
                background-color: #f3f3f3;
                box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
                margin: 1em 1em;
            }
            
            img {
                border-radius: 0.4em 0.4em 0.4em 0.4em;		/* radius should be the same as the img-wrapper */
            }
            
            .gallery-wrapper {
                max-width: 1200px;
                margin: auto;
            }
            
            .gallery-wrapper ul li {
                display: inline-block;	/* sit wrappers in rows, not column block */
            }
            
            h1 {
                padding-left: 14em;
            }
            
            h4 {							/* style the photos titles */
                text-align: center;
                font-size: 1em;
                margin: 0;
                padding: 0.5em 2em;
                text-transform: uppercase;
                font-weight: bold;
                color: black;
            }
            
            .logo {
                margin-left: 22em;
                margin-bottom: 4em;
            }
        </style>
        
        <div id="logo">
            <p>GingeSwagProductions</p>
        </div>
        
        <div id="navbar">
            <p>
                <a href="index.html">Home</a> -
                <a href="film.html">Film</a> -
                <a href="photography.html">Photography</a> -
                <a href="about.html">About</a> -
                <a href="contact.html">Contact</a>
            </p>
        </div>
        
        <hr>
        
        <div class="gallery-wrapper">	
            <h1>Natalia - Photoshoot</h1>
            <ul>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/1.JPG"><img src="pictures/albums/natalia/thumbnail/1.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/2.JPG"><img src="pictures/albums/natalia/thumbnail/2.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/3.JPG"><img src="pictures/albums/natalia/thumbnail/3.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/4.JPG"><img src="pictures/albums/natalia/thumbnail/4.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/5.JPG"><img src="pictures/albums/natalia/thumbnail/5.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/6.JPG"><img src="pictures/albums/natalia/thumbnail/6.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/7.JPG"><img src="pictures/albums/natalia/thumbnail/7.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/8.JPG"><img src="pictures/albums/natalia/thumbnail/8.jpg"></a></figure>
                </li>
                <li>
                    <figure class="img-wrapper fade"><a class="fancybox" href="pictures/albums/natalia/images/9.JPG"><img src="pictures/albums/natalia/thumbnail/9.jpg"></a></figure>
                </li>
            </ul>
        </div>
        
        
    </body>
    
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.min.js"></script>
    
    <script type="text/javascript">
        $(function($){
            var addToAll = false;
            var gallery = true;
            var titlePosition = 'inside';
            $(addToAll ? 'img' : 'img.fancybox').each(function(){
                var $this = $(this);
                var title = $this.attr('title');
                var src = $this.attr('data-big') || $this.attr('src');
                var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
                $this.wrap(a);
            });
            if (gallery)
                $('a.fancybox').attr('rel', 'fancyboxgallery');
            $('a.fancybox').fancybox({
                titlePosition: titlePosition
            });
        });
        $.noConflict();
    </script>
    
    <footer></footer>
</html>

Comments