CODEWITHSUNDEEP
htmlcsscentering
Tyson
Tyson

Reputation: 25

Centering with an image and h2 inside a div

I just can't figure this out. Everyone has to start somewhere, I am just starting to learn CSS so bear with me. Hope you all understand.

So currently this is what is being displayed in the browser

http://i.imgur.com/gktJpXC.png

Here is the HTML

<div class="section-2">

                <ul class="big-features">

                    <li>

                        <img src="images/accept.png">
                        <h2>Easily Accept Credit</br>Cards</h2>

                    </li>
                    <li>

                        <img src="images/location.png">
                        <h2>Multiple Location</br>Inventory</h2>

                    </li>
                    <li>

                        <img src="images/faster.png">
                        <h2>Make Faster</br>Transactions</h2>

                    </li>
                    <li>

                        <img src="images/inventory.png">
                        <h2>Powerful Inventory</br>Management</h2>

                    </li>

                </ul>

        </div>

Here is the CSS

.section-2
{
    width: 100%;
    background-color: #f6f8f8;
    text-align: center;
}
.big-features ul
{
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style: none;

}
.big-features ul li
{
    float: left;
    margin-right: 1.3em; 
    padding: 0;
}
.big-features img
{
    width: 80px;
    padding: 15px 0px 6px 0px;
}
.big-features h2
{
    font-size: 30px;
}

Here is what I want it to look like.

https://i.sstatic.net/lHnKm.jpg

Upvotes: 1

Views: 131

Answers (6)

Mud
Mud

Reputation: 72

All you need to do is move the display:inline to the li instead of the ul tag.

Upvotes: 0

Pbk1303
Pbk1303

Reputation: 3802

  • First you need to apply display:inline-block and list-style:none to your li and not the ul.

  • Second in your css .big-features ul means, it searches for ul
    with a parent having class big-features(which is not present in
    your html), the correct way would be ul.big-features which means ul tag having class big-features

So your correct CSS should be

ul.big-features
{
    margin: 0;
    padding: 0;


}
ul.big-features li
{

    margin-right: 1.3em; 
    padding: 0;
    display: inline-block;
    list-style: none;
}

See this fiddle: http://jsfiddle.net/00kaqz9c/

Upvotes: 0

Mike Robinet
Mike Robinet

Reputation: 843

Your main issue is with this selector .big-features ul li. It says select li elements that are descendants of a ul element that is a descendant of an element with a class of big-features.

What you want is ul.big-features li which selects li elements that descend from a ul with a class of big-features.

Upvotes: 0

j08691
j08691

Reputation: 207901

Rules like .big-features ul won't work here because this tries to select a <ul> element that's a descendant of an element with the class .big-features. To select that element use either .big-features or ul.big-features. A space in a selector means look for a descendant.

The easiest solution would be to just remove the ul from most of your rules:

jsFiddle example

Upvotes: 2

Devin
Devin

Reputation: 7720

change your CSS to this:

.section-2
{
    width: 100%;
    background-color: #f6f8f8;
    text-align: center;
}
ul.big-features 
{
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;

}
ul.big-features li
{
    display: inline-block;
    margin:0 0.7em; 
    padding: 0;
}
ul.big-features img
{
    width: 80px;
    padding: 15px 0px 6px 0px;
}
.big-features h2
{
    font-size: 30px;
}

Upvotes: 1

Jatin
Jatin

Reputation: 3089

Just need to add:

li{
    float:left;
}

Working Fiddle

Upvotes: 0

Related Questions