CODEWITHSUNDEEP
htmlcss
user3417199
user3417199

Reputation: 19

Element in Div will not get centered

I have been trying to center elements inside a div to no avail. Please tell me what i'm doing wrong here. Please find my html and css code below:

<div class="one-column-960">
        <div class="about1"><a name="about"></a>
                <ul>
                    <li>
                        <img src="img/team-2.png" alt="" />
                        <h3>Jose Togbe</h3>
                        <p class="job-role">Information Architect/ UX Designer</p>
                        <p>Entrepreneur and CEO of Planmesh by day, information architect and UX designer by night. Jose has worked with various agencies including Oho interactive, O2KL, Revsquare, and ICC Lowe.</p> 
                    </li>
                </ul>   
        </div>      
    </div><!-- close about us header -->

CSS:

.one-column-960{
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center; 
}

.about1 ul li {
    width: 300px;
    display: inline-block;
    margin: 0 40px;
    padding: 0 20px;
    position: absolute;
}

Thanks in advance!

Upvotes: 0

Views: 57

Answers (5)

Cyberguille
Cyberguille

Reputation: 1602

You could simply do the following in code html

<div class="one-column-960">
    <div class="about1" ALIGN=CENTER><a name="about"></a>
        <ul>
            <li>
                <img src="photo.jpg" alt="" />
                <h3>Jose Togbe</h3>
                <p class="job-role">Information Architect/ UX Designer</p>
                <p>Entrepreneur and CEO of Planmesh by day, information architect and UX designer by night. Jose has worked with various agencies including Oho interactive, O2KL, Revsquare, and ICC Lowe.</p>
            </li>
        </ul>
    </div>
</div><!-- close about us header -->

is not the best solution but it works, it would be better to add this css

Upvotes: 0

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

Use this css property:

.about1 ul li {

width: 300px;

margin: auto;

}

Upvotes: 0

JCorchero
JCorchero

Reputation: 81

I removed some stuff from your css, but here is a result:

.one-column-960{
    width: 100%;
}

.about1 ul
{
    width:300px;
    margin:0px auto;
    display:block;
}

.about1 ul li {
    margin: 0 40px;
    padding: 0 20px;
}

Upvotes: 0

AlexPrinceton
AlexPrinceton

Reputation: 1203

CSS

.one-column-960{
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center; 
}

.about1 ul li {
    width: 300px;
    display: inline-block;
    margin: 0 40px;
    padding: 0 20px;
    /*position: absolute;*/
}

Live Demo

Upvotes: 1

Sabolis
Sabolis

Reputation: 347

All you need to do is remove position: absolute; from your .about1 ul li{} class.

Upvotes: 0

Related Questions