Hi all... position elements is giving me a hard time here :(
hope you could hlep with with these 2 questions.

  1. how does inline, inline-block, block affect position?
  2. consider the code below, how do i vetical and horizontal center the elements inside #contenter.

seems code tag doesnt

<style type="text/css">
        margin:0 auto;


       border: 2px dotted red;




    <div id="first">
        <ul class="u_list">
            <li class="li_element"> 1 </li>
            <li class="li_element"> 2 </li>
            <li class="li_element"> 3 </li>

    <div id="content">
        <img id="img" src="image.jpg"/>
        <form class="input_group">
            <input type="text"/>
            <input type="submit"/>


Recommended Answers

All 6 Replies

lets assume i have other elements and the width/height are unknow.

The easiest way to make content center is to apply margin-left: auto; margin-right:auto;
to the content you want to center. But for this to work the containing div (or whatever) must have a width specified.
So, any content you want centered inside #content must have those rules added to them.
inline and in-block are ways to make content that is normally block level (divs, ul,h1..h6 - that is, designed to appear as if on a new row) to appear inline (or beside other content). E.g. adding display: inline-block to <li> elements make them appear horizontally across the page.
So, for your img and form (which maybe better off as another div) just need a width specified for each and the inline-block added.

For centering a div, the CSS style applied would be as follows:

#divID{width:###px;margin:0x auto;}

This sets a width and sets the left and right margin to auto, thereby centering the div elemnet.

i tried the margin method, doesnt work with vetical centering?

you can use vertical-align and line-height to cover text and image objects within the div element you are applying the CSS to. that should work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.