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 CSS Basics (2014) Basic Layout Clearing Floats

Sandeep Singh
Sandeep Singh
3,582 Points
Posted by Sandeep Singh
Sandeep Singh
3,582 Points

text position under img element

Hi,
Clear float is alright , but the problem is the text position now! just below the image i have put some text belong to image and its showing right side below each image . I have given the text-align to center in ( ul li { } ) section / I tried in div section as well but it does not working.

Thanks

1 Answer

Rhys Kearns
Rhys Kearns
4,976 Points
Rhys Kearns
Rhys Kearns
4,976 Points

You need to show us your code or we have no idea what is happening.

Sandeep Singh
Sandeep Singh
3,582 Points
Sandeep Singh
Sandeep Singh
3,582 Points 
<!DOCTYPE html>
<html>
<head>
    <title>Visit Victoria</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="responsive.css">
</head>
<body>
    <nav>
        <ul id="mainMenu">
            <li><a href="#">----------</a></li>
            <li><a href="#">----------</a></li>
            <li><a href="#">----------</a></li>
            <li><a href="#">----------</a></li>
            <li><a href="#">----------</a></li>
        </ul>
    </nav>
    <header>
        <h2 id="mainHeading">----------</h2>
    </header>
    <div class="main-content group">
        <div class="st">
            <img src="img/aaaa.jpg">
            <ul>
                <li>Visit for </li>
                <li>Visit for</li>
                <li>Visit for</li>
            </ul>
        </div>
        <div class="tw">
            <img src="img/Tccccc.jpg">
            <ul>
                <li>Visit for </li>
                <li>Visit for</li>
                <li>Visit for</li>
            </ul>
        </div>
        <div class="gr">
            <img src="img/ddddd.jpg">
            <ul>
                <li>Visit for </li>
                <li>Visit for</li>
                <li>Visit for</li>
            </ul>
        </div>
        <div class="sq">
            <img src="img/sffff.jpg">
            <ul>
                <li>Visit for </li>
                <li>Visit for</li>
                <li>Visit for</li>
            </ul>
        </div>

    </div>
    <footer>
        <a href="https://----------" target="_blank"><img src="img/facebook-wrap.png" class="icon"></a>
        <a href="https://----------" target="_blank"><img src="img/twitter-wrap.png" class="icon"></a>
        <P>&copy;2017 . </P>
    </footer>
    <!-- <div id="javascript">
    <script src="javascript.js"></script>
    </div> -->
</body>
</html> ```

```css 
* {
    box-sizing: border-box;

}
body{
    margin: 0;

}
img{
    max-width: 100%;

}
a{
    text-decoration: none;
    color: #696969;
}
 nav ul{
    list-style: none;
    text-align: center;
    padding-left:0.10em;
}
#mainMenu li{
    padding: 5px;
}
    header{
    background-image: url("img/sys.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    margin: 0 0 15px 0;
    height: 500px;
}
#mainHeading{
    font-size: 50px; 
    color: #fff;
    border-bottom: 1px solid;
    padding: 0 0 5px;
    margin: 140px 0 0 0;
    display: inline-block;
    text-shadow: 5px 8px 10px #222;
}
ul li{
    list-style: none;

}
.main-content{
    border-bottom: 1px  solid black;
    margin: 25px;

}
.st,
.tw,
.gr,
.sq{
    width: 100%;
    text-align: center;
}



footer{
 text-align: center;
 clear: both;
}
.icon{
    padding: 5px;
    width: 45px;
    height: 45px;

}
#javascript{
    background: black;
    color: #fff;
    padding: 10px;
    text-align: center;
} ```