a {
font-size: 8pt;
text-align: left !important;
text-decoration: none;
}
.main {
text-align: center;
}
<div class="main">
New York City<br />
Long Island<br />
Upstate New York<br />
</div>
This is a compact version of what I have and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left". It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.
What's wrong here?
The text alignment needs to be set on the parent element of the anchor-links, you cannot tell an anchor-link to align itself to the left as it is of a fixed width. You need to either remove text-align:center; from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the !important rule there.
Depending on what exactly you're doing, this may work:
.main a {
display:block;
font-size: 8pt;
text-align: left !important;
text-decoration: none;
}
Text-align can only work on a block element (such as a div). "span" and "a" are inline by default, but display:block can change that.
An anchor is an inline element by default, which in your case means it's only as wide as it needs to be, so it really is aligning left but only within itself. Since it's nested within main presumably a block element, main in centering the a tag.
Either put the anchor in another block element and align that left, or set it to block.
This is not working because your a links are inline elements without a specified width. There is nothing to center because the entire element is the width of the a.
To fix this, either
set the .main div to text-align:left; or
wrap the a links in a p and give it text-align:left;
If you look at this fiddle, you'll see that the links are still inline and therefore, the text's alignment doesn't count for anything (since the element will collapse around its contents).
If you make the links inline-blocks or blocks with a defined width, you can justify the text within them, as shown in another fiddle.
Now, if you want the links up against the left side of the container, float:left as in this fiddle.
The links themselves are centered. Wrap them in something else and left align that.
<div class="main">
<div class="left">
New York City<br />
Long Island<br />
Upstate New York<br />
</div>
</div>
Related
I'm trying to understand text-align but it seems it acts with different rules based on what type of element it is applied to and where it is applied from, whether a parent or a child element.
To my knowledge, if I apply text-align:center to a div, then all of the containing elements will have a text-align:center property as well.
If I apply text-align:center on an inline element like an image, nothing will happen because the image has no surrounding space that is part of the element. I have this code and I have no idea why it behaves the way it does. What I'm trying to achieve is to simply center an image horizontally within a header tag and I achieve it this way:
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
text-align: center;
}
img {
height: 100%;
}
<body>
<header>
<img src="logo.png" alt="Logo image">
</header>
</body>
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen? Isn't the image supposed to be aligned within its own space, and since there is none, it shouldn't work? I thought that saying text-align:center in a div would be like typing it for each one of the containing elements as property so it was just a quicker way of doing it. But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
If I have a header with an image inside, isn't saying:
header{
text-align:center;
}
the same as saying:
img{
text-align:center
}
because the child elements get applied the parent property to them as well? I thought text-align would only act on the child elements of the element it is used on. but then why doesn't it work if I declare it on the image?
Even, though I tried to set the image to display:block and set text-align:center on it, this time I was sure it would work, but it didn't. Why?
If I use text-align:center on a p element, which is a block element, the element is centered within its own space, shouldn't that happen too for images that are set to display:block?
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen?
Images are, by default, display: inline, which causes them to be treated (more-or-less) the same way as a character of text.
But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
text-align describes how the inline content of the element should be aligned within the element.
An img element has no content.
If I use text-align:center on a p element, which is a block element, the element is centered within its own space
No, it isn't. The text inside the paragraph is centred. The alignment of the paragraph itself is unaffected (by default a p element is with: auto so will completely fill the available horizontal space after margins, borders and padding are accounted for).
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
In the following snippet, header is a block level element. img is an inline level element. And so the image is horizontally aligned to the center of the parent block level element.
header{
text-align:center;
}
<header>
<img src="https://placekitten.com/100/100" alt="kitten" />
</header>
Is the following snippet the same as the above? No. Because text-align:center is not applied to a block level element that contains inline-level content.
img {
text-align: center
}
<img src="https://placekitten.com/100/100" alt="kitten" />
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/
I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.
Why does the div not expand to the full height of the image?
I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0; and float:right, all of which make the containing div not adjust it's height to the image height.
.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}
<div class="intro">
<div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div>
<p>Sorry, but the page you requested could not be found.</p>
</div>
DEMO
'Why does the div not expand to the full height of the image?'
Because floats will overlap with blocks, only block formatting contexts contain floats. (You can find a pretty good overview of the whole topic here: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )
On to solve the problem at hand:
The align=right will actually result in the img being float: right (the align attribute is deprecated and css should be used).
To contain the floated image in its parent div you need either have the parent div establish a block formatting context (block formatting contexts enclose nested floats) or explicitly clear the float with an additional element after the img that is styled as a clear: right.
An easy solution to create a block formatting context is to float the parent div as well, although my preferred solution in this case would be to simply set its overflow to hidden (also resulting in a block formatting context).
Check out the updated fiddle http://jsfiddle.net/R4bCy/8/.
What you need to do is add after the p tag,
<div style="clear:both;"></div>
Whoops, apologies, posted and you edited your question - the align right is floating it I believe (you should instead use float:right and a clearfix of some sort).
example: http://jsfiddle.net/R4bCy/5/
This is what I believe you want:
http://jsfiddle.net/R4bCy/6/
If you wanted the text on the left and the image floated to the right, please do this is your CSS:
http://jsfiddle.net/R4bCy/15/
You can also have two divs that have a width of 50% contained within a container div. This will allow you a little more flexibility in your placement of the image because the text and image will each have their own modifiable divs with independent attributes
I just wrote the following code
<img src="http://www.lorempixel.com/100/100"><img src="http://www.lorempixel.com/100/150" id="test">
#test {
text-align: center;
}
But the image is not centering. I also used text-align: right which did not work either. I can use float and margin-left but I'm curious why its not working with text-align.
Have a look at text-align css property as described on w3.org website. It says that this property applies to block containers.
Now, the <img> tag itself is not a container (it cannot contain any thing) hence the text-align property does not work as expected. To make an image center-align, there are various ways; the simplest of them is to specify text-align: center on its parent element.
This property specifies how the inline content of a block is aligned,
when the sum of the widths of the inline boxes is less than the width
of the line box.
Try putting the img in a div with inline-block specified and the first image as the background image of the div.
something like:
<div style="display: block; text-align: center; background-image:url([your_first_image]);">
<img src="[your_second_image]"/>
</div>
However, this probably will not work on an image, you need to use float, padding or something of that nature.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
It should work! It worked for me :D
text-align is used for aligning the text within an element. An img element has no text inside of it to center, so it does nothing. float, which floats the element within its parent, is probably what you want here.
Not the best practice text-align to align images.
"The tricky thing about the text-align property is that you can only align text with it - you can't use it to move block-level elements like images. Some browsers will align images or tables with this property, but it's not reliable, as you've found." --Jennifer Kyrnin, About.com
You can use the deprecated img attribute align="center", Although you won't use. This way tags and style are mixed, and, to worsen, there are vertical and horizontal spaces around the full image.
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
The best way to solve this is using CSS. Setting the image as div's background then the div's space will be your image's space and you can use margins to put it in place. You can try to use one of these others techniques
CSS background-image Technique:
background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0 no-repeat; /* div horizontal center */
background:url('path_to_img') 0 center no-repeat; /* div vertical center */
I try this and it works fine :
In the CSS:
.centreimage {
text-align: center;
}
In the HTML:
<p class="centreimage">
<img src="Images/blababla.png">
</p>
Another way -- you can wrap it around a table. see below.
We had to do it this way in a stylesheet.
<html>
<table border="0" width="530" >
<td align="center" valign="center">
<img src="http://www.lorempixel.com/100/150" id="test">
</img>
</td>
</table>
</html>
Consider learning about the CSS display property, a very important CSS property in my opinion, at least when dealing with positioning and alignment. The property is set to different values on different elements by default. Assuming the position property is set to the static value, block and inline take up the entire parent element's width. block will be on its own line while inline shares the line with other elements.
Elements like p tags and h1s are block level elements. Elements like span tags and ems are inline elements. Images however are neither!
Images have a default display value of inline-block. This means it has the characteristics of inline and block elements - You can set the width and height (like block level elements), it is on the same line as other elements (like inline level elements), and the container is the width and padding - nothing else.
The CSS rule text-align: center; centers the element in its container. This means for p elements it will be fine because the display is set to block. For images, however, you cannot center it (so nothing will happen) unless you put it in a div (parent element container) because, assuming the width is set to 100%, there is nothing to center it in, nothing to be aligned with. Consider the following example:
body * {
border: 1px solid black;
text-align: center;
}
<body>
<p> This is a <span> !!Span element containing!! paragraph !!Span element containing!!</span>about lorem ipsum, the infamous place holder text. Lorem ipsum is supposedly Latin, but not really. That's all. </p>
<img width = '200' src="https://i.stack.imgur.com/zZTPs.png">
<p> The display of p is block, span inline, img inline-block. That's why the image's border doesn't stretch and the others do (you may not notice it but they do)</p>
</body>
A good workaround is setting the display to block. This will make ti stretch so there is something to center it in. As soon as there is something that acts as a parent container, ether it be changing the display (the border is what you are aligning it on) or enclosing it in a div (the div is what you are aligning it on) the aligning will then work.
because it is "text"-align.
the property is designed to work a certain way and given a certain name.
Interestingly, if a the property is applied to a container that has image+text then the alignment works for text as well as image.
.one{
text-align: center}
<div class="one">
<p>hello pal</p>
<img src="https://cn.i.cdn.ti-platform.com/content/22/showpage/regular-show/za/regularshow-200x200.png">
</div>
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.