CODEWITHSUNDEEP
htmlcss
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Horizontally aligning elements in a div and word wrap

HTML is 

<div class="jfmfs-friend-container">
    <div class="jfmfs-friend  ">
        <input class="friend-checkbox" type="checkbox">
        <img src="/picture">
        <div class="friend-name">Test User</div>
    </div>
</div>

Here I am able to achieve all three elements checkbox, img and friend-name div in a single line. I am looking for following:

  1. checkbox and friend-name in verticall middle to the img.
  2. Word wrap in the friend-name div
  3. All elements with equal distance (atleast 5px) to each other. Right now all 3 are adjacent to each other with no space

Here is my CSS. I am giving css code for the parent div incase of any display:block property:

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    vertical-align: middle;
    word-wrap: break-word;
}

.friend-checkbox {
    position: relative;
    vertical-align:middle;
    display: inline-block;
}

#jfmfs-friend-container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    width:100%;
    height:400px;  
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
    font-size: 12px;
}

Upvotes: 1

Views: 3260

Answers (2)

Jeffrey Ray
Jeffrey Ray

Reputation: 1264

To center your elements in the "jfmfs-friend" div, you need to add this css:

div.jfmfs-friend  {
    text-align: center;
}

To make the word-wrap in your "friend-name", you need to set the width. Currently it will expand to the size of it's parent. Setting the width of the "friend-name" dive or one of it's parent containers will cause the text to break when it meets the edge of the element.

To get your elements to be separated from eachother, you need to play with the padding and margin css properties until you get the desired effect. Adding a padding of 5px to each element would probably do what you want.

.friend-checkbox, img, .friend-name {
     padding: 5px;
}

You can use jsfiddle.net to tweak your layout and get a live preview. This will help you get the spacing you desire.

Also, check out these references on the padding and margin properties.

Upvotes: 0

antejan
antejan

Reputation: 2624

Demo: http://jsfiddle.net/55twK/

  1. Set vertical-align:middle to all three elements, now you miss img.
  2. Now all three elements works like inline elements and if there will be more text div can wrap itself to the new line. So one of the options is to set width or max-width to the div.
  3. Horisontal margins and paddings works fine for inline elements.

Upvotes: 2

Related Questions