When I have text beside an image and set them at the same point on the screen, why don't they align properly at the top of their containing div? The text appears to be a pixel or two lower than the image. Is it because of the hight of the text?
The site I am concerned with is below. I want the top of the head-shots to align with the top of the bios. Any ideas?
http://www.fiveholeforfood.com/the-team/
That's because of the line-height
The line- height is pushing it down a couple of px but if you want to keep that for ease of reading I'd give the paragraphs a -5px margin on the top
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
margin-top: -5px;
It rather seems to be font-related, perhaps the ascent line is pushing the font down.
If so, there's nothing that can be done about it except adjusting the margins & padding’s applied to your elements to move the text some pixels upwards. Changing fonts or maybe even font-sizes would ruin the effect though.
Related
I am trying to put an image in a container but for some reason, there is always a small additional space at the end of the image: Here is a fiddle with tests: http://codepen.io/anon/pen/sikAm. If you look at the last one in the right bar, there is no white because the container hides the overflow. This made me think that the problem happens because of the image, not because of the container. So the container's size gets that white because the image "pushes" an additional space inside. However, the image's size is correct and it has no margin that can add this at the bottom, so I might be completely on the wrong track:
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
I don't know what to do about this. What can cause that whitespace? What am I missing?
The problem is that, by default, images are inline elements, and its vertical-align property defaults to baseline. This alignment produces some space below the element.
To fix it, you can use
display: block [Demo]. This way the element will no longer be inline-level, so vertical-align won't apply.
vertical-align: middle [Demo]. This fixes the alignment problem. Other values may also work.
imgs are displayed inline by default, which creates spaces automatically for next line of texts.
Instead set the display to block. It will make those spaces gone.
img {
display:block
}
Alright, so this is some of the css and html:
css:
div {
height:24px;
line-height:24px;
}
html:
<div><img src="image.png"/>Text</div>
Now what that should (I think) produce is a div that is 24 pixels high, and the text should be vertically center aligned in the div, after the image. P.S. the image is 24x24px. However, it throws off the line-height to be about 12px too much (reducing the line-height to 12px does not solve it). Changing the image to be 12x12px though works and puts the text in the right spot. if the image is completely removed, the text is in the right spot. I guess my question is why is that doing what it is, and if/how I can fix it.
Thanks, sharf.
Give vertical-align:middle to img
div > img
{
float:left;
vertical-align:middle;
}
Fiddle
Try adding vertical-align to the img and experimenting with that to get it they way you want.
The simplest (but not always the best) solution is
img { vertical-align: bottom; }
The image does not throw off line height; rather, it causes the height of the line box to become larger than line-height. The reason to this is that by default, an image is treated as if it were a letter, of the size specified by the image dimensions, sitting on text baseline. Thus, the image requires a height that is the height of the image itself plus the distance between text baseline and the bottom of the font.
In CSS terms, “sitting on text baseline” is caused by the default setting of vertical-align: baseline. You can override this in various ways, with different effects on the vertical placement, but beware that browsers have many bugs in the implementation of vertical-align, and the value of bottom is so simple that they probably get it right.
I've started to write a design for my video streaming site.
http://www.xjerk.com/new.site/ [SFW]
The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.
However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.
I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).
Is there any way this can be achieved, or would a fixed width design be my best bet?
PS: I hope I've explained everything well enough.
Use media queries to set break points for the blue bars size.
Have you tried setting the video_box to a % of the width?
This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.
For exmaple:
.video_box {
margin:1%;
width:31%
min-width:100px;
height:370px;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #d0d0d0;
background-color: #ffffff;
float: left;
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
On, e.g., this link: http://4ad.com/releases/20949, if you look at the album cover image in the top right part of the page, the black border is not quite square: there are a few extra pixels of height at the bottom.
As far as I can tell the image is 300x300 pixels in size. There are no obvious (to us!) sources of the extra 4.5 pixels of height. Does anyone know what could be creating such a discrepancy?
Since the image is inline, it's treated as text, which means a few extra pixels are added to the bottom as leading. Displaying the image as a block (i.e. adding display: block;) solves the problem nicely.
By default, images are displayed as inline-block and aligned with the baseline of the text.
The extra space is added for Descenders.
To fix it, use vertical-align: top or middle or bottom on the img. See http://jsfiddle.net/Gu6pG/3 for the difference.
Change image to be displayed as block element by adding this setting to your style.css file:
/* consolidate this CSS style */
#rightbox_packshot img {
width: 300px; /* from line 2896 in style.css */
height: 300px; /* from line 1498 in style.css */
display: block;
}
Alternatively you could use float:left (or right) in place of display:block which does make the image a block element but allows you to keep additional text (if you have it) inline.