CODEWITHSUNDEEP
htmlcss
MKK
MKK

Reputation: 2753

How can I align this?

This is demo: http://jsfiddle.net/KS4eS/

Please take a look at demo first.

I'd like To set their alignment the same.

Something like this. How can I?

                    center
------------------------------------------------------
                    A2345343
                    B435234
                    C4364353
                    D3426432632
                    E46324362
                    F235235
                    GGGGG

------------------------------------------------------

HTML

<div class='general'>

    <div class='list'>

            <div class="top_page_function">A2345343</div>
            <div class="top_page_function">B435234</div>
            <div class="top_page_function">C4364353</div>
            <div class="top_page_function">D3426432632</div>
            <div class="top_page_function">E46324362</div>
            <div class="top_page_function">F235235</div>
            <div class="top_page_function">GGGGG</div>

    </div>



</div>

CSS

.general {
    background-color: rgb(255, 255, 255);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    text-align: center;
    padding: 10px;
}

.list{
    width: 400px;
    min-width: 250px;
    margin-bottom: 20px;
}

Upvotes: 0

Views: 64

Answers (4)

user1987708
user1987708

Reputation:

Another trick is to add a wrap to .List div.

HTML:

<div class='general'>
   <div class='list_wrap'>
    <div class='list'>
            <div class="top_page_function">A2345343</div>
            <div class="top_page_function">B435234</div>
            <div class="top_page_function">C4364353</div>
            <div class="top_page_function">D3426432632</div>
            <div class="top_page_function">E46324362</div>
            <div class="top_page_function">F235235</div>
            <div class="top_page_function">GGGGG</div>
    </div>
   </div>  
</div>

CSS

.general {
    background-color: rgb(255, 255, 255);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    text-align: center;
    padding: 10px;
}

.list_wrap{
    margin:0 auto;
    width: 250px;
}

.list{
    width: 100%;
    text-align:left;
    margin-bottom: 20px;
}

JSFiddle

Upvotes: 1

svineet
svineet

Reputation: 1889

Maybe setting a container around the top_page_function class divs and setting its position to absolute with left as 50%,will do.
Other solutions work too, prefer them, but just because i have made the fiddle, I'm posting it.
And yes, you have to set the height of list clss on your own too.That's one con of this method.
JSFiddle

Upvotes: 0

Prisoner
Prisoner

Reputation: 27618

This will get what you want:

.general {
    background-color: rgb(255, 255, 255);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    padding: 10px;
    text-align:center;
}

.list{
    margin-bottom: 20px;
    text-align: left;
    margin: 0 auto;
    display: inline-block;
}

It will also work with any width. See here: http://jsfiddle.net/KS4eS/8/

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You can align your column like this:

.list div {
    text-align:left;
    margin-left:200px;
}

Upvotes: 0

Related Questions