http://pastebin.com/index/9M2rA8cx that has all my code.
You will notice that the two div's are centered in large.css. However, the text is being re-centered after each '.' is applied. If I put the span id="wait" outside the centered div, it will show up in the upper left corner. I don't need exact centering, but I can't use a absolute position for centering because the text changes.
Is there any way to append the "..." to the already centered text without it re-centering?
thanks!
Can't you just apply a fixed width style to the wait span, such as:
span.wait{
display: inline-block;
width: 20px;
}
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 need to have text and image so that they are vertically aligned together. Specifically image should be vertically positioned at the middle of the text. What's the best way to do that?
One constraint: the content of my <img> tag is retrieved from external source and it would be great if I could leave <img> tag unchanged (no attributes added).
Sample:
<div>Some text <img src="http://somewhere.com/someimage.png"/></div>
img { vertical-align: middle; }
Might be best to add a class or id to the img or surrounding div though as this will affect all img tags on the page
div{background:url("http://somewhere.com/someimage.png") 50% 50% no-repeat; line-height:1.5em; text-align:center}
should do it. depending on font-size
When putting a <img> in text, it seems to want the bottom of the image to be at the text baseline, or a little above, example:
How can I have it so the image's center is at the text's center? I know it can be done with CSS, however I forgot how.
Using vertical-align: middle. E.g. http://jsfiddle.net/8QzFV/
Can you add padding to the top of the image?
#myImage
{
padding-top:6px;
}
just wrapp a div around it and use css style vertical-align:middle
The html:
<td>
<img>
text here
</td>
The css:
td img{
display: block;
float: left;
}
I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertical alignment of the text.
Any ideas?
If you know the height of the image itself you can use the line-height property.
<td style="line-height: 50px;">
<img>Text text text
</td>
This should force the text to be displayed in the center of the line-height.
Try setting vertical-align:middle; in the CSS for the img. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).
Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*
Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.