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:
checkbox and friend-name in verticall middle to the img.
Word wrap in the friend-name div
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;
}
Demo: http://jsfiddle.net/55twK/
Set vertical-align:middle to all three elements, now you miss img.
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.
Horisontal margins and paddings works fine for inline elements.
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.
Related
This question already has answers here:
Why does inline-block cause this div to have height?
(7 answers)
Closed 2 years ago.
I've run into an interesting problem with line-height.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
}
<div class="container">
<div class="text-container"><span class="text">Hello</span></div>
<span class="text">Hello</span>
</div>
In this fiddle above there are 2 spans, both with font-size and line-height set, inside a flex container. One of the spans is inside a div and the other one isn't.
The spans themselves have a height of 12px, but the div has a height of 18px, causing the two spans to be out of line. If I add line-height: 0; to the div, then the problem is fixed and the div is 12px tall.
The spans must be on the same line, and one of them must be inside a container. display: block works, but for my purposes this element needs to be inline for certain use cases.
What's causing the div to have this extra height, and is there a nicer solution than having to set line-height: 0; on the div?
I found the answer here. It's to do with how line-height is calculated for inline elements. I've fixed it by setting font-size: 0; on the div containing the span.
The display on the span elements are different. The one inside the div has a display: inline, while the span standalone is display block. If you would like them to react the same, simply put a display on the element.
If you set line-height: 12px; on the container it kind of works. But if you look closely there is still a small space.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
line-height: 12px;
}
<!DOCTYPE html>
<body>
<div class="container">
<div class="text-container">
<span class="text">Hello</span>
</div>
<span class="text">Hello</span>
</div>
</body>
I'm having a simple (but frustrating) issue with my background. I currently have it as a static background image and a solid color for my content space. For some reason the content color is not showing up? I feel like i've gone through everything to fix it but no dice. Any suggestions?
body {
margin-left:auto;
margin-right:auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1;
background-image:url(../img/bglogo.jpg);
background-attachment:fixed;
}
#contentcontainer {
max-width: 960px;
margin: 0 auto;
float: none;
padding-top: 0px;
padding-left:10px;
background-color: #fffdf8;
}
The website in question can be found here: http://mikesbaum.com/plan9alehouse/index.html
You are using Floats to position your divs side by side. As such, the parent div does not have access to the height of those divs as they populate. This leaves the parent div at 0px height, making it invisible on the page.
Add 'overflow:auto;' to your #contentcontainer class and you should be all set.
It's because the contents of #contentcontainer (home, about, etc.) are all floated, and you're not clearing it. When you do this, the parent element doesn't wrap the child element. If you look at the height of #contentcontainer you will see that it is set to 0.
To fix this, you need to clear the floated sections. the quickest way to do this is to just add an empty div as the last child in #contentcontainer with the css clear: both;:
<section id='contentcontainer'>
<section id='home'>...</section>
...
...
<div style='clear: both;'></div>
</section>
Usually if you find yourself clearing floats a lot, most people will create a clear or clearfix class, and just use the class name for the div instead of using inline css.
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.