Grow your CSS skills. Land your dream job.

Still trying to understand the *div*s alignment techniques

  • # September 29, 2012 at 2:33 pm

    Its been months since I wanted to get hold of aligning “div”s correctly across the screen and the vertically. and also align the text inside it.

    Another problem I’m facing is with aligning text in an “li” vertically. “vertical-align:middle;” doesn’t seem to work :(

    Link to the HTML file : [http://pastebin.com/kJPFbA7Z](http://pastebin.com/kJPFbA7Z “biticexam.ac.in | Website”)
    Link to the CSS file : http://pastebin.com/pWq2Sd77

    How I want it to be : http://lookpic.com/O/i2/151/q0CAd3Xb.jpeg

    http://dl.dropbox.com/u/6304809/BIT_Logo.jpg

    # September 29, 2012 at 2:52 pm

    Your image link does not work so we can’t work on your code.

    Aligning text inside anything is a matter of text-align (for left/center/right) and setting a line-height for the text to the same as the height of the containing element (for vertical alignment).

    # September 29, 2012 at 8:21 pm

    try adding text-align: center; to #hd

    # September 30, 2012 at 1:33 am

    @Paulie_D. I’ve updated the img’s link. Setting the line-height:200 for width:200px takes moves the text outside the element’s visible area.

    thanks @dfogge. The examination dept got center aligned :)
    But the rest of the issues are still there.

    # September 30, 2012 at 2:46 am

    Can you make a reduced case in Codepen or provide a link to a live site?

    This is what I have so far: http://codepen.io/anon/pen/sjzGa

    We can’t really help until we can see how things react to changes.

    # October 1, 2012 at 11:16 pm

    @Paulie_D Sorry for late response.

    What I’m actually trying to do is make,
    “biticexam.ac.in” look similar to “bitmesra.ac.in” as they belong to same organization.

    I’ve edited the : http://codepen.io/anon/pen/sjzGa

    Img link :

    http://lh5.googleusercontent.com/-YTvPpvIU4nM/UGpcFADOL4I/AAAAAAAAAc0/ij0dzH2FdQ8/s500/BIT_Logo.jpg

    # October 2, 2012 at 5:17 am

    I’ve given you the layout, you can just add the image and adjust the fonts how you want.

    You can take it from here.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".