Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jeremy Frimond
Jeremy Frimond
14,470 Points
Posted by Jeremy Frimond
Jeremy Frimond
14,470 Points

Centering Spans within a div

I am trying to center my content (which is a series of image links) within a div. I have used span tags for each block within the div. I want the content to always remain centered within the div despite screen size. The icons do shift as I alter the viewport size however they all remain aligned left. Here is the code

<head>
    <meta charset="UTF-8">
    <title>LB Marine Safety</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<html>
<body>
    <div class="icon_page">

        <div class="wrapper">

            <div class="header">
                <h1>Department of Marine Safety Form Directory</h1>
                <h2>City of Laguna Beach</h2>

            </div>

            <div class="icons">


                <span>  
                        <a href="#"><img src="css/img/med_cross.png" width="150" height="150"></a>

                        <h4>Medical Forms</h4>
                </span>


                <span>      
                        <a href="#"><img src="css/img/sharkfin.png" width="150" height="150"></a>
                        <h4>Shark Incident</h4>
                </span>     

                <span>      
                        <a href="#"><img src="css/img/sharkfin.png" width="150" height="150"></a>
                        <h4>Shark Incident</h4>
                </span> 

                <span>      
                        <a href="#"><img src="css/img/sharkfin.png" width="150" height="150"></a>
                        <h4>Shark Incident</h4>
                </span>             

                <span>      
                        <a href="# "><img src="css/img/sharkfin.png" width="150" height="150"></a>
                        <h4>Shark Incident</h4>
                </span> 

                <span>      
                        <a href="# "><img src="css/img/sharkfin.png" width="150" height="150"></a>
                        <h4>Shark Incident</h4>
                </span>                 

                </div>
        </div>
    </div>
</body>
</html>

here is the CSS

body {
            width: 100%;
}

span {
    display: inline-block;

}

.icon_page {
            width: 60%;
            border: 2px solid black;
            margin: 0 auto;         
}

.icons {
            border: 2px solid blue;

}   

.header {

            border: 2px solid green;
}


.header h1,h2 {
    text-align: center;
}           



.icons img {

    border:2px solid black;
    border-radius: 10px;
    margin: 10px;
}

.icons h4 {
    font-size: 1.3em;
    width: 150px;
    margin: -10px 10px 10px 10px;
    text-align: center;
}

appreciate any advice

5 Answers

Stu Cowley
Stu Cowley
26,287 Points

Hey Jeremy,

Whenever I want to center a span within a div I usually declare in the CSS

span {
    text-align: center;
}

I'm not 100% sure if this is valid method of doing this, I believe that Nick Pettit said in the "Smells Like Bakin" project that this is a valid method to achieve this, as I have it in my notes.

Hope this helps

Stu :)

Jeremy Frimond
Jeremy Frimond
14,470 Points
Jeremy Frimond
Jeremy Frimond
14,470 Points

Thanks I needed to put in in the icons div not in the span. Cheers

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Jeremy,

So you did, my apologies. I use text-align: center; everytime I need to center something in a div and it seems to valid all OK.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Jeremy,

To center the images nested inside the spans, you'll need to give the spans an explicit width. Because this is a fluid layout, the width will need to be a relative unit. I just guestimated, but 49% seems to be pretty close to center (you could get more accurate with some responsive web design math). Then, you need to use text-align: center, because images are inline elements. Here's what my span looks like:

span {
  display: inline-block;
  width: 49%;
  text-align: center;
}

To align the H4 elements, you'll need to set their left and right margins to "auto" so they'll fill their sides with any leftover space. Here's what my H4 looks like:

.icons h4 {
    font-size: 1.3em;
    width: 150px;
    margin: -10px auto 10px;
    text-align: center;
}

Here's what the page looks like with the modified code, on CodePen: http://codepen.io/nickpettit/pen/8b20b77b6c8c91071b51bdac9f1907ce

One last note: All of those spans should probably be an unordered list, which is a little bit more conventional than divs. Spans are inline elements, which are best used when nested inside of paragraph or anchor elements.

I hope that helps! :)

Jeremy Frimond
Jeremy Frimond
14,470 Points
Jeremy Frimond
Jeremy Frimond
14,470 Points

thanks Nick Pettit if I were to recode this to be an UL would I replace all the spans with `<li> ?

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

That is correct! The containing div could become a UL and the spans would be the LIs.