Tag div with text and image vertically centered

I'm having a problem with vertically align an image with a line of text in a div tag using an external CSS file.
Any help would be appreciated

You can simply do:

ProdDimensions img {vertical-align: middle ;}}

Or you can use an unordered list that has your arrow incorporated 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 ProductList class (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 put a background image on the ProdDimensions class as follows:
background: url (Arrow.gif) left Center no-repeat; padding-left: 21px;

This will simply put a background image in the left middle of your div, the padding will ensure that the text is not on top of the arrow.

Tags: Dreamweaver

Similar Questions

  • Panoramic image with text and images at the top of the poster image

    I tried to create a characteristic panoramic image where there is text on the top of the image of the poster with a picture. Below the poster image is panning. The problem is the text and the image that I put on the top of the poster image, does not appear when you use the panoramic image. How can I get it work?

    The problem was the image should be a jpeg file, it was a tif

  • ListField line personalized with text and images

    Hello

    I use the example of complex files provided at this URL as a basis for my application. I want to do is get data feed from a Web site and post it in a ListField. Each row in the field has a picture and associated text.

    I made the following changes in my implementation of the application in the example

    1. create a normal ListField instead of a subclass of ListField

    2 getting data from the stream and fill a vector with the necessary information

    3. implementation of the ListFieldCallback.

    In the drawListRow of the callback method, I create a TableRowManager object and pass the data for that particular line. Using these data, I create fields and adding them to the TableRowManager. Then by the drawRow of the TableRowManager method, I call sublayout() and specifying the x, y, width, height for each field in the TableRowManager.

    Now, when you debug the application, I see that the drawListRow method is called whenever I move around the list or when the ListField is first added to its parent. But none of the fields or lines are displayed.

    DrawRow even is called whenever drawListRow. But the lines are never displayed. I just get a white screen. Tried to remove all fields and keep a single LabelField, but even that is not displayed.

    Here's the code, if this is useful

    Class TableRowManager

    private class TableRowManager extends Manager
        {
            int _index;
    
            TableRowManager(String myTxt, String msg, String imageUrl, int index)
            {
                super(0);
                BitmapField imgField = new WebBitmapField(imageUrl);
                add(imgField);
    
                LabelField personLabel = new LabelField(myTxt, DrawStyle.ELLIPSIS);
                add (personLabel);
    
                LabelField itemLabel = new LabelField(msg, DrawStyle.ELLIPSIS);
                add(itemLabel);
    
                _index = index;
            }
            public void drawRow(Graphics g, int x, int y, int width, int height)
            {
                layout(width, height);
                setPosition(x, y);
                g.pushRegion(getExtent());
                g.popContext();
            }
            protected void sublayout(int width, int height)
            {
                Field currField1 = getField(0);
                layoutChild(currField1, getPreferredWidth(), getPreferredHeight());
                setPositionChild(currField1,0,0);
                Field currField2 = getField(1);
                layoutChild(currField2, (int) Field.USE_ALL_WIDTH, getPreferredHeight());
    
                setPositionChild(currField2,40,80);
    
                Field currField3 = getField(2);
                layoutChild(currField3, (int) Field.USE_ALL_WIDTH, getPreferredHeight());
                setPositionChild(currField3,40,120);
    
                setExtent(getPreferredWidth(), getPreferredHeight());
            }
            public int getPreferredWidth()
            {
                return Display.getWidth();
            }
            public int getPreferredHeight()
            {
                return 150;
                //return height of row
            }
        }
    

    the callback method drawListRow

    public void drawListRow(ListField list, Graphics g, int index, int y, int w)
        {
            String text = (String)listElements.elementAt(index);
            String str1 = text.substring(0,text.indexOf("-"));
            String str2 = text.substring(text.indexOf("-")+2);
            String imageName = image[index];
           String url = "http://myURL/"+imageName;
           TableRowManager rowManager = new TableRowManager(str1,str2,url, index);
            rowManager.drawRow(g, 0, y, w, list.getRowHeight());
        }
    

    Can someone please help me with this. The format of what I'm looking for is something like this

    ------------

    | image |  LabelField1

    |           |  LabelField2

    -------------

    Thank you.

    What I usually do with the listField is myself to draw the bitmap and text, something like the following:

    ' public void drawListRow (list ListField, Graphics g, int index, int y, int w)
    {
    String text = (String) listElements.elementAt (index);
    String str1 = text.substring (0, text.indexOf("-"));
    String str2 = text.substring (text.indexOf("-") + 2);
    String imageName = image [index];

    Z.i. bitmap = / * get the bitmap * / (better preparation before coming here, for performance)

    int xPos = LEFT_OFFSET;
    int ypos = TOP_OFFSET + y;
    int w = bitm.getWidth ();
    int h = bitm.getHeight ();
    fontHeight int = this.getFont () .getHeight ();

    g.drawBitmap (PosX, Posy, w, h, z.i., 0, 0);

    PosX = w + SOME_OFFSET

    graphics.drawText (str1, xpos, ypos);
    YPos += fontHeight;

    graphics.drawText (str2, xpos, ypos);

    }

    It worked for me all the time.

    Of course, I don't want to say that do you it this way, but I'm just give another alternative that works.

    Rab

  • Need help with text and image

    I'm working on adding an image as a background, he has been in a slight saturation. However I have text that I want to place on top of that and it becomes as light as the image. Can you please help me make the solid text. I am searching through all the effects of the text box, and it seems normal to 100%.

    Your help is very appreciated.

    Thank you

    Samantha B.

    Try to add a new layer and dragging the text boxes to this layer.

  • DW3 problem with text and images

    Is it possible to use a reversal when text is selected in a section of your page and display a picture on another part of the same page?

    Google "disjoint bearings.

  • Unwanted moving text and images

    I have problems of text flow. I have a document that has a sidebar with text and images. I'm now put the main body of the text and, if on the page on the right side I add more than one column of text, side bars (which are on their own layer and locked) all move them to another page. Suggestions to prevent this? I use cs4.

    Has the number of pages changed? It looks like for me smart text reflow...

  • Is my client using the web browser editor can change the position of text and images, the site was built with muse

    Is my client using the web browser editor can change the position of text and images, the site was built with muse and at first, tell him that he could change the text and images, but he can't change the location of contents of Th.

    Now he wants to paste and copy directly from the web browser Publisher Word and wants to change all of the place itself.

    Does someone have an answer or another solution?

    Philippe

    First of all, to answer your question about moving content. No, that is not supported.

    Then, never advised him to stick to Word what for the web. Word adds a lot of very strange code that can break your page completely. Tell him if he has a Word to add to the site to paste into Notepad or any other text editor, copy and paste to Muse.

  • There it means broader pay changes to a site by an outside user. With In - Browser editing on can do very simple changes (texts and images of replacement). It's too little compared to what can do W

    There is t he not a simple HTML editor allowing to change text and images add privileges or pdf?

    At this stage, you can change images and text with in the edition browser, please do not hesitate to add your suggestion in our ideas section.

    Thank you

    Sanjit

  • Text and images disappear in overlays frame scrolling when you turn the iPad

    I'm having this problem:

    When I rotate from portrait to the horizontal, content scrolling frame iPad disappears, the same phenomenon occurs if the first view is horizontal to vertical.

    The names of levels of different content and images are different.

    The problem comes with the app Adobe Content Viewer of an iPad 3.2.1 version 3 with iOS beta 7 v.6 so that this does not happen on an iPad 1 with iOS 5.5.1 the file downloaded to the producer Folio folio is the same.

    Suggestions to solve this problem?

    Below is a short video showing the scrolling image, text and images disappear in two articles (but this happens in all pages)

    A fix for a nearly identical issue was released on 13 September. Did you rebuild the application and try again?

  • I need to transfer my history of the text and images from my old iPhone to my new iPhone, but have already moved all other data to my new phone via iTunes and spent time to organize.  How do I reset this transfer without any?

    I need to transfer my history of the text and images from my old iPhone to my new iPhone, but have already moved all other data to my new phone via iTunes and spent time to organize.  How do I reset this transfer without any?  I transfer a 5s to itself.

    For your photos, try importing them to your computer and their synchronization then back to the SE.

    Import photos and videos from your iPhone, iPad or iPod touch - Apple Support

    For your texts, they moved with the backup restore?

  • Reagent: text and image move together

    Hello

    So, I hope that it is very simple, something simple I'm missing.

    I want that my text and images remain "attached" to another, rather than dragging on the other I'm resizing the Muse (and preview when I look at a preview in Chrome). As you can see in my screenshot, at some point, this happens, and at some point it does not work: title text block 'IJsbreker' remains perfectly in place under the image, but the foregoing is waaayyy down and slides on my image. I have no idea why this is happening: all the text boxes and picture are pinned the same, I have the same resize 'features' (the text boxes are all width and the images are all of width/height). I have no idea what I'm doing wrong with the boxes of slide on each other, or what I do with the boxes that do not stay in the right place.

    responsive image and text.jpg

    Any idea?

    Thanks in advance!

    Hi Anoek,

    I took a glance to your file and was able to discover the problem. What you see should not happen with the simple layout of image/text/image/text/etc. However, it seems that there is a bug caused by the many items hidden on the page (take a look in the layers panel). Hidden items were prejudicial to the page layout that you rub the smaller browser width, which they should not do, because they are hidden! The good news is that you should not copies of the any of these elements. Instead, simply change the text attributes, position and size accordingly in each breakpoint.

    I edited your file to use only one copy of each block of text and image, which fixed the problem. You can download the modified version of your file here. Let me know if you have any questions.

    Best,

    Anna

  • Muse is changing some text and images to white during the download of FTP

    Muse is changing some text and images to white during the download of FTP.  I tried to delete and re-create these assets, but still their changed to white... and I have a white background, so it seems as if it is not yet here.

    Hi Michael,

    Please share your Muse file with us for assistance.

    Please download on creative cloud or dropbox and share the download link with me in a private message.

    Kind regards

    Akshay

  • Oppacity question - instead of building slowly, it immediately passes over the text and images.

    Hello

    Having trouble with the oppacity on my projects. As you can see on the screenshot, I clicked clearly something because any text or images that I'm trying to add to my project and the oppacity value to 0% - then build more than a few seconds at 100%, will not do that. Yet the previous items that I've added will be.

    Y at - it something that I have to click to stop the new text and images to change oppacity immediately. I want to build up over time - I can see that the extra keyframe is different also. Help is greatly appreciated.

    Thanks - Scott.opacity.png

    Hello

    Yes - if you enable the automatic Transition next to the button (red Chrono) self-image-key mode, then you will get the default transitions whenever you create two keyframes that have different values.

    Or well, to immediately solve the problem in your screenshot, just select two keyframes and then right click and choose Create Transition from the context menu. Who's going to do.

    HTH,

    Joe

  • How to correct text and images that are somehow outside the area of cardboard?

    This is the second document that my layout has mysteriously been presented outside the editing table. I saved this document yesterday and everything was fine. Today, there is a connection of several pages text box link, but on 4 pages my text and images have disappeared from the actual page and the table surrounding mount, but it shows the link text box later in the grey area. The last time I had to delete and re-create the pages, but don't have the time. I tried selecting all and using the arrow key to move everything, but he mistakes "this value would cause one or more objects to leave the editing table. I also tried selecting all and downward revision to 10% to bring it to the page or the editing table, but the same error. Any other suggestions? Screenshot below.

    It's a really long shot, but it would be interesting to .idml export and opening that. (see delete minor corruption by exporting)

    And Daniel is right - there is something is wrong with this file and it seriousl get better.

  • Try to add a page to a pages document. It worked until now but just finished page 13 with text and photos and cannot add another page, using macbook pro with El Capitan and the most recent version of the Pages.

    Try to add a page to a pages document. It worked until now but just finished page 13 with text and photos and cannot add another page, using macbook pro with El Capitan and the most recent version of the Pages.

    You have placed your beam to insert at the end of your text on page 13 and then apply Insert menu: Page Break? In the v5.6.2, Pages I just add a new page to a section of four pages to this approach.

Maybe you are looking for

  • Very slow MacBook

    Hello My macbook pro has been gradually becoming slower and slower. The crash of the apps and they take forever to open. Once opened, they are always slow to exploit. I don't have much free space, and despite this, I deleted so recently in the hope t

  • Tecra M4 tablet mode problem

    I have a Tecra M4 which is about 4 weeks. All of a sudden (without changing any settings or install new software) it will not now go into tablet mode. When I turn the screen and click it down, it turns off and by connecting an external monitor, I dis

  • Where can I find what should be my temperatures of the CPU for laptop HP Pavilion DV7-6195us?

    I download a software to view the inside temperatures and even if they have little symbols (green check, red/yellow flame, etc.) by every internal part (e.g. CPU0) I want to know what HP internal temperature range is recommended.  Thank you.

  • Add photos programmatically to a shared photo album?

    I have pictures from several sources on our network that I would have automatically redistributed to albums different shared photo in iCloud. I thought it would be a simple Automator application, and there are - save for the part "shared photo album.

  • Malfunction of the membership to Xbox?

    Recently I tried to renew my subscription gold live xbox with my debit card for 1 month subscription and it still will not let me play live. I paid today and I looked at billing information and he said that the 1 month subscription expires on 09/25/1