Div tag with text and image verticaly centered

I am having a problem with vertically aligning an image with
a text line in a div tag using an external CSS file.
Any help would be appreciated

quote:
Originally posted by:
Night_Ripper
You can simply do this:
ProdDimensions img {vertical-align:middle;}
Or you can use an un-ordered list that has your arrow
embedded as a background image, something like this:
.ProductList ul {list-style-image:
url(Arrow.gif);list-style-position:outside;list-style-type:none;text-align:left;}
.ProductList li {margin:0;}
wrap your unordered list around a div with the class
ProductList (or whatever you want to call it) and it will display
with the arrows in the middle of the text.
Another way to do it would be to set a background image on
ProdDimensions class like this:
background: url(Arrow.gif) left center
no-repeat;padding-left:21px;
That will simply put a background image to the left middle of
your div, the padding will ensure the text is not on top of the
arrow.
I used your idea of using the arrow as the div bg and it
worked like a charm.
Thank you very much for your help!

Similar Messages

How can i copy line with text and image to ms word

When I insert an image in textflow using InlineGraphicElement it works, but when I copy the line with the image to MS Word it copies only the text (not the image).
How can i copy the image to MS Word?

If you want copy formatted text and image to MS Word, you need to give MS Word rtf markup, because Word can recognize rtf markup but not TLF markup.
So you need to create a custom clipboard to paste a rtf markup. It's a large feature for you, because you need a tlf-rtf converter in your custom clipboard.
TLF Custom Clipboard Example:
package
 import flash.display.Sprite;
 import flash.desktop.ClipboardFormats;
 import flashx.textLayout.container.ContainerController;
 import flashx.textLayout.conversion.ITextImporter;
 import flashx.textLayout.conversion.TextConverter;
 import flashx.textLayout.edit.EditManager;
 import flashx.textLayout.elements.*;
 import flashx.undo.UndoManager;
 // Example code to install a custom clipboard format. This one installs at the front of the list (overriding all later formats)
 // and adds a handler for plain text that strips out all consonants (everything except aeiou).
 public class CustomClipboardFormat extends Sprite
 public function CustomClipboardFormat()
 var textFlow:TextFlow = setup();
 TextConverter.addFormatAt(0, "vowelsOnly_extraList", VowelsOnlyImporter, AdditionalListExporter, "air:text" /* it's a converter for cliboard */);
 private const markup:String = '<TextFlow whiteSpaceCollapse="preserve" version="2.0.0" xmlns="http://ns.adobe.com/textLayout/2008">Anything you paste will have all consonants removed.</TextFlow>';
 private function setup():TextFlow
 var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
 var textFlow:TextFlow = importer.importToFlow(markup);
 textFlow.flowComposer.addController(new ContainerController(this,500,200));
 textFlow.interactionManager = new EditManager(new UndoManager());
 textFlow.flowComposer.updateAllControllers();
 return textFlow;
import flashx.textLayout.conversion.ITextExporter;
import flashx.textLayout.conversion.ConverterBase;
import flashx.textLayout.conversion.ITextImporter;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.IConfiguration;
import flashx.textLayout.elements.TextFlow;
class VowelsOnlyImporter extends ConverterBase implements ITextImporter
 protected var _config:IConfiguration = null;
 /** Constructor */
 public function VowelsOnlyImporter()
 super();
 public function importToFlow(source:Object):TextFlow
 if (source is String)
 var firstChar:String = (source as String).charAt(0);
 firstChar = firstChar.toLowerCase();
 // This filter only applies if the first character is a vowel
 if (firstChar == 'a' || firstChar == 'i' || firstChar == 'e' || firstChar == 'o' || firstChar == 'u')
 var pattern:RegExp = /([b-df-hj-np-tv-z])*/g;
 source = source.replace(pattern, "");
 var importer:ITextImporter = TextConverter.getImporter(TextConverter.PLAIN_TEXT_FORMAT);
 importer.useClipboardAnnotations = this.useClipboardAnnotations;
 importer.configuration = _config;
 return importer.importToFlow(source);
 return null;
 public function get configuration():IConfiguration
 return _config;
 public function set configuration(value:IConfiguration):void
 _config = value;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.ListElement;
import flashx.textLayout.elements.ListItemElement;
class AdditionalListExporter extends ConverterBase implements ITextExporter
 /** Constructor */
 public function AdditionalListExporter()
 super();
 public function export(source:TextFlow, conversionType:String):Object
 if (source is TextFlow)
 source.getChildAt(source.numChildren - 1).setStyle(MERGE_TO_NEXT_ON_PASTE, false);
 var list:ListElement = new ListElement();
 var item1:ListItemElement = new ListItemElement();
 var item2:ListItemElement = new ListItemElement();
 var para1:ParagraphElement = new ParagraphElement();
 var para2:ParagraphElement = new ParagraphElement();
 var span1:SpanElement = new SpanElement();
 span1.text = "ab";
 var span2:SpanElement = new SpanElement();
 span2.text = "cd";
 list.addChild(item1);
 list.addChild(item2);
 item1.addChild(para1);
 para1.addChild(span1);
 item2.addChild(para2);
 para2.addChild(span2);
 source.addChild(list);
 var exporter:ITextExporter = TextConverter.getExporter(TextConverter.TEXT_LAYOUT_FORMAT);
 exporter.useClipboardAnnotations = this.useClipboardAnnotations;
 return exporter.export(source, conversionType);
 return null;

Will Adobe ExportPDF convert a pdf with text and images to docx ?

I have tried to convert an adobe pdf, which includes text and images, to a docx file. The Adobe ExportPDF has not been able to do it - comes back with many errors.

Mostly it can do it, though you can't expect a precise match on the layout. What errors do you get?

I ... Acrobat.... (sometimes, when I need to print PDF with text and image)

First of all, I want to let Adobe know that you are a immens castle that is almost impossible to communicate with!
I just want a simple question to be answered: I want to print a document which beholds text AND an image.
If I print it, the image is NOT on the print (MacBook and iMac Yosemite)
If I print it form my iPhone (6), the image is on the print.
How can I fix it?

You report your problem as using Acrobat on a Mac. You've posted in the Reader forum for iOS.
I've moved your question to the Creating, Editing and Exporting PDF forum which seems more appropriate.
You'll need to provide more information for us to be able to help you.

Creating ScrollView with Text and Image

What is the best way to create a scrollview that should contain Image and Text?
The text and the image date are set dynamically.
Image and Text should be scrollable as one entity (NOT scrollable separately).
I don't really know how to determine the sizes of each elements ...
For example I can't make :
UITextView *tmpTxt = [[UITextView alloc] initWithFrame: CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)];
... because I have no height value determined yet as I don't know how long will be the text.
Could you please help me to move forward ??
Message was edited by: fatter

To calculate text size of for example in 15 points, you could use the following type of function.
- (CGSize)calculateSizeOfString:(NSString *)text {
CGSize textSize = [text sizeWithFont:[UIFont systemFontOfSize:15.0] constrainedToSize:CGSizeMake(320, 9999) lineBreakMode:UILineBreakModeWordWrap];
return textSize;
Then, you can access the width & height, by querying the value of textSize.width and textSize.height.

How to send an SMS with text and image

I'm trying to add a photo and text to an SMS but can't add anything in the body of the SMS. What do I need to do?

Hi Joe,
Yeah, that's been the method I've been testing with. Is there a way for AIR to access the Intent API?
Android code:
final Intent i = new Intent(Intent.ACTION_SEND);
i.putExtra("sms_body", msgText);
i.putExtra(Intent.EXTRA_STREAM, imageUri);
i.setType("*/*");
startActivity(i);
Thanks

As to apply bar of clod roller with text and image /Como aplicar barra de rolagem com texto e imagem

Tem um componente no Flash que aplica a barra de rolagem, mas queria saber se tem uma maneira de personalizála. o componente scrollbar, apenas muda a coloração da barra, quero saber como criar uma barra de rolagem personalizada.
It has a component in the Flash that applies the bar of clod roller, but wanted to know if it has a way of personalizála. the component to scrollbar, only dumb the coloration of the bar, I want to know as to create a bar of personalized clod roller.
Exemplo :http://www.djfilipemonteiro.com.br/?gclid=CNa4lsLes6ECFQUf7god-1x8_w

I am modifying the correct httpd.conf file on the server, it just doesn't seem to work. - If I put the rewrite rules in the <Directory /> the rewrite works but it adds /Library/WebServer/Documents to the URL.
I also tried putting the rewrite rules in <IfModule mod_rewrite.c> but that did not work either.
mod_rewrite is enabled and running on the server.
I will post the rewrite rules again in the code brackets. Sorry for the long post. - If some one can try them out on their Leopard Server to see if they can get them to work, it would be much appreciated. Again, these work on my Leopard Client but I can't get them to work on Server.
-- The httpd.conf file posted above is just the default conf file found in /private/etc/apache2/
<code>
RewriteEngine On
Options +FollowSymLinks
RewriteRule ^(.+)/$ http://%{HTTP_HOST}$1 [R=301, L]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.php(.*)\ HTTP
RewriteRule (.+)\.php(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.asp(.*)\ HTTP
RewriteRule (.+)\.asp(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.aspx(.*)\ HTTP
RewriteRule (.+)\.aspx(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.htm.(.)\ HTTP
RewriteRule (.+)\.htm.(.)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.cfm(.*)\ HTTP
RewriteRule (.+)\.cfm(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.bak(.*)\ HTTP
RewriteRule (.+)\.bak(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\.inc(.*)\ HTTP
RewriteRule (.+)\.inc(.*)$ $1$2 [R, L]]
RewriteCond %{THE_REQUEST} ^GET\ ([^\?]+)\..(.)\ HTTP
RewriteRule (.+)\..(.)$ $1$2 [R, L]]
<code>

Need help with adding formatted text and images to Crystal Report?

Here's my scenario:
I have a customer statement that's generated as a crystal report and that has a placeholder for advertisement. The advertisement is mixture of formatted text and images. Until now we only had one advertisement that was always used on the report. The new requirement is that we would have a pool of hundreds of advertisements and would need to display one specific advertisement on the customer statement based on various marketing criteria. They key is that the advertisement content will be determined programmatically and cannot be hardcoded into the report. I'm using Crystal2008 with .net SDK.
Here are the solutions I thought of, but I'm still rather lost and would appreciate your help/opinion.
1) Pass HTML or RTF to the report
Not really sure if this is possible and how to get it done. Also how would I pass in images? Would display formatting be reliable when exporting to PDF?
2) Create each add as a subreport and append it programatically
I actually have this working, but I only know how to append a new section to the end of the report and then load the subreport to the section. I have no other controll of the placement. Is there a way to dynamically load a subreport to a predefined section in the main report? How about adding a dummy subreport in the main report as a placeholder and then replacing it with a different subreport? How could I do this?
3) Pass an Image to the report
I would create each advertisement as an image and then would somehow add the image to the report. How would I load the image and control the placement? Could I somehow define a placeholder for the image in the main report-maybe a dummy image to be replaced?
Thank you.

Hello Pavel,
I would got the third way.
You can use dynamic images in your report.
Just by changing the URL to the image the image can be changed.
Please see the [Crystal Manual|http://help.sap.com/businessobject/product_guides/cr2008/en/xir3_cr_usergde_en.pdf] and search for images.
or directly here
[Setting a Dynamic Graphic Location Path on an Image Object|https://boc.sdn.sap.com/node/506]
[Dynamic image and HTTP://|https://boc.sdn.sap.com/node/3646]
[codesample for .NET|https://boc.sdn.sap.com/node/6000]
Please also use
[Crystal Reports 2008 SDK Documentation and Sample Code|https://boc.sdn.sap.com/developer/library/CR2008SDK]
[Crystal Reports 2008 .NET SDK Tutorial Samples|https://boc.sdn.sap.com/node/6203]
Hope this helps
Falk

Stretched text and image with FULL_SCREEN_INTERACTIVE after Air player update

One of my Air applications uses StageDisplayState.FULL_SCREEN_INTERACTIVE to switch to full screen during the presentation of some sheets.
Everything worked fine untill some users reported a streching of texts and images in the sheets.
It turns out that the problem occurs after an update from the Adobe Air Player to 3.1 from 2.7.
The first screen shots shows the text as it should be, the second screen shot shows the text after the update of the Air Player.
The code used to go into the Full Screen mode is:
    public function setFullScreenInteractive(fullScreenWidth:int = Constants.INT_SCREEN_WIDTH_SMALL, fullScreenHeight:int = Constants.INT_SCREEN_HEIGHT_SMALL):void
                         s.fullScreenSourceRect = new Rectangle(          0, 0, fullScreenWidth, fullScreenHeight);
        s.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
with Constants.INT_SCREEN_WIDTH_SMALL = 800 and Constants.INT_SCREEN_HEIGHT_SMALL = 600.
I can reproduce the problem on a couple of computers with Windows Xp but it's not happening on all the computers I've tested.
Any idea how to fix this (without telling my users to Uninstall the current Air Player and reinstall the Air Player 2.7)?
Regards,
Bart

Hi Bart,
Unfortunately the correct screenshot link appears to broken. Could you please open a new bug report on this over at bugbase.adobe.com? Please post back with the URL so that others affected can add their comments and votes. It would also help if we had a sample project/application that we can reproduce this issue with. If you'd like to keep this private, please feel free to send it to me directly at [email protected]
Thanks,
Chris

Resizing text and images with actions and keeping it resized for the next slides, how to?

Hello everybody,
I searched over the net and in this support section for a solution to my problem, but i didnt find any, so...here I am asking you experts.
Through a particular use of different actions I make a logo "compose" in the first slide of my presentation (the logo is composed by text and images that interact), then in the second slide i make it resize so it goes 50% of its size and moves down like a TV logo, in the corner of the slide, and I want it to stay there for all the lenght of the presentation.
It might be a stupid problem, but I didnt understand how to keep it there, 50% of its size and always in that position. If i duplicate the slide I obviously duplicate the 100%-size-logo, not its 50%-size-version, and if i shrink it in order to make it be 50% of its size the text size doesnt shrink so i have to change the text size manually, but the visual effect is imperfect.
Lets summarize:
slide 1: text appears, image appears, the text and the image move and "compose" the logo
slide 2: the complete logo reduces its size to 50% and moves in the lower corner of the presentation, in the place I want it to be for, lets say, 20 slides
slide 3: i want to have this logo already reduced in size and in its position, in the right lower corner, but if i try to group the different parts of the composed logo and i try to squeeze them the font doesnt change its size, I only squeeze the area that the text occupies.
Some help please guys?
Thanks in advance,
Dom-
(add: the problem is kind of similar to this: https://discussions.apple.com/message/9179367#9179367 . the idea of making a slide that contains the logo and text in the exact positions they would be after the move and scale actions is good and that was my first attempt, the probem is that it looks impossible to me to create a second "little" version of the logo that looks exactly the same of the first one that i reduced, so i hope there is some way to tell the app to use "the first logo, only resized the way i want", and thats the point where the problem with the size of the text comes out)

Hi pritam,
The “maintain proportions of window for different monitor
resolutions” property will maintain the proportional size of the front panel
(its x and y sizes) when opened in a different resolution. The front panel
objects will not be resized and will appear larger (and may not fit inside the
front panel) when saved in a higher resolution, and moved to a lower
resolution. You can use the “Keep window proportions” property to achieve the
same results.
To have both the front panel dimensions and front panel
controls scale, you need to have both the above property and the “scale all
objects on front panel as the window resizes” selected. The labels will not be
resized by this.
I tried using both properties on two monitors and noticed
that the change does not occur when the resolutions between the monitors are
different. I had to lower both monitors’ resolution to see the change work
properly.
Please post back if you have any questions. Have a great day!
Ryan D.
District Sales Manager for Boston & Northern New England
National Instruments

I have a sharepoint custom list with Title and image attachments, now i want to display image attachments in div based on the title.

hi,
i have a sharepoint custom list with Title and image attachments, now i want to display image attachments in div based on the title.

i am using the below code only
SPSite mySite = new SPSite("http://sharepoinsiteaddress");
SPWeb myweb = mySite.OpenWeb();
SPList myList = myweb.Lists["Announcements"];
SPListItem myListItem = myList.GetItemById(1);   foreach (String attachmentname in myListItem.Attachments)
String attachmentAbsoluteURL = myListItem.Attachments.UrlPrefix // gets the containing directory URL
+ attachmentname;
   // To get the SPSile reference to the attachment just use this code
  SPFile attachmentFile = myweb.GetFile(attachmentAbsoluteURL);
   // To read the file content simply use this code
   Stream stream = attachmentFile.OpenBinaryStream();    StreamReader reader = new StreamReader(stream);
   String fileContent = reader.ReadToEnd();
here i am using panel, how can i attach this attached image to panel

I´ve made four Columns with text and an Image over the middle of two columns. How do I put a text u

I´ve made four Columns with text and an Image over the middle of two columns. How do I put a text under the Image that spans over the Columns?

Did you mean that?
or
Did you mean that?
Let me know.

Aligning text and images in a StyledDocument like 'middle' on img in HTML

Hi,
I have a StyledDocument which is a document source for a JTextArea, into which I am inserting combinations of 22x22 images and text strings. This is just a nitpick, and I am hoping someone could assist.
What I would like to do is middle-align the text and images, so that the strings are vertically centered with the images.
You can reproduce this as such:
messagePane = new JTextPane();
messagePane.setMargin( Constants.smallInset );
doc = (StyledDocument)messagePane.getDocument();
Style style;
style = doc.addStyle( "normal", null );
StyleConstants.setForeground( style, Color.BLACK );
StyleConstants.setFontFamily( style, "Verdana" );
StyleConstants.setFontSize( style, 12 );
style = doc.addStyle( "image", null );
StyleConstants.setIcon( style, new ImageIcon( someimageofyourchoice ) );
doc.insertString( doc.getLength(), " ", doc.getStyle( "image" ) );
doc.insertString( doc.getLength(), "some misaligned text", doc.getStyle( "normal" ) );Thanks in advance!
Alex

code correction:
top block:
messagePane = new JTextPane();
messagePane.setMargin( Constants.smallInset );
StyledDocument doc = (StyledDocument)messagePane.getDocument();cut + paste from several separate components...

Can you put a div tag on top of div tag that contains an image?

i have a div tag with an image inside it, i would like to create another div tag and place a video inside this one. Is it possible to place the div tag with the video inside it on top of the div tag with the image inside it?
Any help is very much apreciated

Typically, a background image is placed in a division's CSS code.
See example below: (view source in browser to see the CSS and HTML code)
http://alt-web.com/DEMOS/fixed-background.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Javascript errors when formating text and images in Contribute CS3

I'm using Contribute CS3 on Vista, I insert an image inside a
paragraph tag with text then align the image
ie the source code looks like this:
<img src="..." alt="" align="left"/>some
text
I change the text in the paragraph to bold
Source code example: <img src="..." alt=""
align="left"/>some text
I will get the following error messages:
1 This error appears 2 times:
"While executing DW_Text_CSS_Style canAcceptCommand in
ccText_Styles.htm, a JavaScript error occurred."
2 This error appears 2 times:
"While executing DW_Text_Bold canAcceptCommand in
Text_Style.htm, a JavaScript error occurred."
3 This error appears 3 times:
"While executing DW_Text_Italic canAcceptCommand in
Text_Style.htm, a JavaScript error occurred."
4 Next all the styles and formatting options are greyed out
but I can still publish or discard.
To be able to apply the styles and formatting in Contribute
CS3 I now need to close the application and reopen it again and be
careful not to reproduce the error.
I've also tried renaming the Configuration folder under
c:\Users\myusername\appData\Local\Adobe\Contribute CS3\ but it
hasn't worked.
We've reproduced this error on 3 similar machines in our
office all running cs3 but the bug doesn't occur when performing
the same steps in Contribute 3 or dreamweaver CS3 which is running
side by side on these machines.

It might be trying to pull the image from a different
location than the image is currently stored in. Try to move the
image file to a different folder and then load.

Div tag with text and image verticaly centered

Similar Messages

Maybe you are looking for