Member Avatar for wildplace

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

<html>
<head>
<title>test</title>
<style type="text/css">
    body{
        width:500px;
        margin:0 auto;
    }

    #content{
       float:left;
       clear:both;
       width:500px;
       height:80px;
       margin:auto;

       border: 2px dotted red;
   }

   #first{
       float:left;
       clear:both;
   }

    .input_group{
        display:inline;
   }

   .li_element{
       display:inline;
       list-style:none;
   }

   .u_list{
       margin:0;
       padding:0;
   }
</style>
</head>
<body>
    <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>
        </ul>
    </div>

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

</body>
Edited by wildplace
  • 4 Contributors
  • 6 Replies
  • 99 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 6 Replies

Member Avatar for wildplace

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

Member Avatar for hericles

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.

Member Avatar for JorgeM

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.

Member Avatar for wildplace

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

Member Avatar for JorgeM

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, networking, learning, and sharing knowledge.