Link to my jsbin
I am having a bit of unexpected trouble. I would like to vertically center the "Thing2" text. However the css property vertical-algin: middle doesn't seem to be working.
So I'd like to know 2 things:
Why isn't it working?
Is the way I'm doing it (by adding a main class to each then a styling class) the easiest way to do this?
Note
This is just a proof of concept of an overall idea that I have. So obviously class names and ids will change.
You can't vertically align text in that way, see http://www.w3.org/wiki/CSS/Properties/vertical-align
Try instead setting a line height on your container div equal to the height of the div if you just want to vertically align a single line of text.
e.g.
.metroSmall {
line-height: 87.5px;
}
This is a nice post detailing a few different ways of vertically aligning html elements: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
If you are only supporting the latest browsers you can also use the new table, and table-cell display styles, which support vertical alignment in the same way that tables do.
e.g.
.metroSmall {
display: table-cell;
vertical-align: middle;
}
Bear in mind this won't work on earlier browsers such as internet explorer 6 though.
The way i vertically center things is to set the line-height to the height of the container
try adding line-height: 87.5px to .about
Try Using This http://jsfiddle.net/YUruZ/
Use CSS style display property table and table-cell
Related
I'm using flex property for my custom blockquotes, here's demo:
http://jsfiddle.net/buda9/pumZH/3/
Everything works fine when I use plain text in it. But when I add or layout isn't so nice :) I made a temporary fix by using display: block but then my icon in :before pseudo element isn't vertically aligned and I need this icon to be in the middle
blockquote {
display:flex;
}
Trying to fix this for the last 2 days
Your demo is little confusing, but I can tell you that this is not a good use case for Flexbox layout. It is not intended for things like this one. Better use old methods for this like floats, absolute positioning,etc. You need to wrap your content inside a blockqoute in some block-level box to trigger correct behavior of flexbox layout.
HERO IS UPDATED DEMO: http://jsfiddle.net/pumZH/4/
Is this what you want ?
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I am designing a website for my client and do not have much experience in web design and CSS. I also want to design it in standard CSS way.
The question is I am quite confused with CSS align property and float property. I know there is much difference between these two properties but I am still not able to handle it correctly at the time of development.
Can anyone explain to me the exact difference between these two properties?
"text-align" applies to the content of a box, while "float"
applies to the box itself.
Align - You use align to align text and other items rather it be left, right, centered, or justified. Align DOES NOT remove the item from the document flow.
Float - Floats an object to the left or right and REMOVES it from the document flow. (i.e. A thumbnail image with paragraph text flowing around it -- you will usually need to set some margins on the image so it looks right).
You will most likely be using float to lay the page out. I would suggest the useage of a grid system. Here is the easiest, most compatible grid system I know of to date. http://webdesignerwall.com/trends/960-grid-system-is-getting-old
Also you will need to understand what using the classes "first" and what the CSS clearfix does. You will also need to understand generating a baseline grid (vertical grid, not just horizontal) so that all elements not only line up left to right but up and down as well.
First I would like to suggest that you refer to the Head First series of CSS and HTML by O'Reilly publications. This is a must read book for those new to designing.
So, the float property is used to move a lot of blocks (for example your sidebar, your content area etc.) and the HTML align thing you are talking about, you can do the same in CSS in this way.
.test{
text-align: right;
}
The above code mentioned will be CSS and equivalent HTML code will be.
<div class="test"> This text will be aligned from right </div>
For the time being refer to O'Reilly head first with HTML AND CSS, will help you a lot.
If you give float to the child div then the parent div becomes independent of the dimensions of child div i.e., the parent div will not increase its width and height automatically.(If you haven't given any dimensions to the parent div then it inherits width:0 and height:0)
Many designers face problems because of float because it is not friendly with layout but it is very useful.
We can make the float friendly with layout by using css selector :after.
whereas if we give Text-align to the child div , the parent div will not be affected.
This is all I know.
align is a property to align a single element for table , text, span etc
float is a property to align block level elements like sidebar, div etc
text-align applies to the text in the container, while float applies to the container itself.
Example:
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
.textAlign {
text-align: right;
}
.float {
float: right;
}
<div class="textAlign">text align example</div>
<br>
<div class="float">float example</div>
I have a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.
http://jsfiddle.net/p87Bv/1/
You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.
tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.
move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS
http://jsfiddle.net/p87Bv/5/
All you have to do is give you tds a height, and then give the divs inside a height: 100%.
Here's the fiddle: http://jsfiddle.net/p87Bv/2/
It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.
Link: http://jsfiddle.net/ZFHUm/
If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:
height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/