8 Replies Latest reply on Mar 11, 2016 4:03 AM by osgood_

    How do I vertically align text next to an image in Dreamweaver CC 2015?

    meddance

      I can't seem to figure out how to vertically align text using the gridrow with column bootstrap component. I have one column with a logo image and one column with a single line of text, which I want to align at the bottom edge of the image (the bottom of the row) on full screen devices and to drop directly below the image on small screen devices. !

        • 1. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
          BenPleysier Adobe Community Professional & MVP

          Please let us be privy to the code, preferably by giving us a link to the site.

          • 2. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
            osgood_ Level 8

            meddance wrote:

             

            I can't seem to figure out how to vertically align text using the gridrow with column bootstrap component. I have one column with a logo image and one column with a single line of text, which I want to align at the bottom edge of the image (the bottom of the row) on full screen devices and to drop directly below the image on small screen devices. !

             

            Flexbox makes this unbelievably easy. Don't be put off by all the browser pre-fixes - all you need is to get up to speed with the up-to-date Flexbox properties of which there are very few.

             

            Write the css:

             

            For desktop:

            .logo-text {

            display: flex;

            align-items: baseline;

            justify-content: center;

            }

             

            For mobile media query:

            .logo-text {

            flex-direction: column;

            align-items: center;

            }

             

            Convert the above css online Autoprefixer CSS online – make your vendor prefixes is actual. or better still if you are using a css compiler that will do it automatically. (Brackets, which will be in the next version of Dreamweaver will have this capability either built in or by way of an already existing extension).

             

            Result below: Go learn some Flexbox and these simple things, which were once difficult or hacky to achieve, any many more will be easy. Even producing a responsive grid has just become so simple a dead parrot could do it - no need for Bootstrap or any other lame frameworks any longer - break free explore and enjoy.

             

            <!DOCTYPE html>

            <html>

            <head>

            <meta charset="UTF-8" />

            <title>Untitled Document</title>

            <style>

            .logo-text {

            display: -webkit-box;

            display: -webkit-flex;

            display: -ms-flexbox;

            display: flex;

            -webkit-box-align: baseline;

            -webkit-align-items: baseline;

            -ms-flex-align: baseline;

            align-items: baseline;

            -webkit-box-pack: center;

            -webkit-justify-content: center;

            -ms-flex-pack: center;

            justify-content: center;

            }

            h2 {

            margin: 0;

            padding: 0 0 0 20px;

            }

             

            @media screen and (max-width: 678px) {

            .logo-text {

            -webkit-box-orient: vertical;

            -webkit-box-direction: normal;

            -webkit-flex-direction: column;

            -ms-flex-direction: column;

            flex-direction: column;

            -webkit-box-align: center;

            -webkit-align-items: center;

            -ms-flex-align: center;

            -ms-grid-row-align: center;

            align-items: center;

            }

            h2 {

            padding: 0;

            }

            }

             

            </style>

            </head>

             

            <body>

             

            <div class="logo-text">

            <div><img src="https://forums.adobe.com/themes/adobe-global/images/logo.png"  /></div>

            <h2>Adobe</h2>

            </div>

            </body>

            </html>

            1 person found this helpful
            • 3. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
              meddance Level 1

              The site is www.medicinedancecounseling.com. It does not currently have the text next to the logo because I could not make it work. I decided to put my name (the text I wanted next to the logo) under my photo. I would still like to know how to do this though.

              • 4. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
                meddance Level 1

                I am afraid this went right over my head. I will try to look into flexbox. Suggestions as to where to look?

                • 5. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
                  Nancy OShea Adobe Community Professional & MVP

                  Bootstrap column classes.

                   

                  <div class="container-fluid">

                  <div class="row">

                  <div class="col-sm-8">

                  <img src="images/Header.gif" class="img-responsive" alt="MDC Logo">

                  </div>

                  <div class="col-sm-4">

                  <h3 class="text-center" style="margin-top: 5.55vh">SOME TEXT GOES HERE</h5>

                  </div>

                  <!--end row--></div>

                  <!--clear floats before navbar-->

                  <div class="clearfix"></div>

                  1 person found this helpful
                  • 6. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
                    meddance Level 1

                    Nancy, would this not put a large space between the logo and the text when viewed on mobile devices?

                    • 7. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
                      Nancy OShea Adobe Community Professional & MVP

                      Did you try it?

                       

                      Of course, feel free to tweak it by creating a custom class in a media query.

                       

                      @media only screen and (min-width: 768px) {

                      .add-margin {margin-top:5.5vh}

                      }


                      <h5 class="add-margin">YOUR TEXT HERE</h5>

                       

                      Nancy O.

                      • 8. Re: How do I vertically align text next to an image in Dreamweaver CC 2015?
                        osgood_ Level 8

                        meddance wrote:

                         

                        I am afraid this went right over my head. I will try to look into flexbox. Suggestions as to where to look?

                         

                        OK, let me attempt to help you out here:

                         

                         

                         

                        Find the below in your code:

                         

                         

                        <article class="container-fluid">

                        <div class="row" >

                        <div class="col-lg-3"><img src="images/150919_9.jpg" class="img-responsive img-circle" alt="Leslie Fleming, LMHCA" >

                        <h6><em>Leslie Fleming, MA LMHCA</em></h6>

                        </div>

                        <div class="col-lg-9">



                        Add the code marked in red below and remove class="col-lg-3" and class="col-lg-9" from the <divs> as shown below:



                        <article class="container-fluid">

                        <div class="row" >

                        <div class="flex-box">

                        <div><img src="images/150919_9.jpg" class="img-responsive img-circle" alt="Leslie Fleming, LMHCA" ></div>

                        <h6><em>Leslie Fleming, MA LMHCA</em></h6>

                        </div>

                        <div>

                         

                         

                        Add the below css to the end of your MDC.css stylesheet:

                         

                        .flex-box {

                        display: -webkit-box;

                        display: -webkit-flex;

                        display: -ms-flexbox;

                        display: flex;

                        -webkit-box-pack: center;

                        -webkit-justify-content: center;

                        -ms-flex-pack: center;

                        justify-content: center;

                        -webkit-box-align: baseline;

                        -webkit-align-items: baseline;

                        -ms-flex-align: baseline;

                        align-items: baseline;

                        padding: 40px 0;

                        }

                         

                         

                        @media screen and (max-width: 768px) {

                        .flex-box {

                        -webkit-box-orient: vertical;

                        -webkit-box-direction: normal;

                        -webkit-flex-direction: column;

                        -ms-flex-direction: column;

                        flex-direction: column;

                        -webkit-box-align: center;

                        -webkit-align-items: center;

                        -ms-flex-align: center;

                        -ms-grid-row-align: center;

                        align-items: center;

                        }

                        h6 {

                        padding: 15px 0 0 0;

                        }

                        }

                         

                         

                         

                         

                        THATS IT! SIMPLE with FLEXBOX - No guessing games or using padding margin to get it all lined up. The browser prefixes make the css look more complicated than what it is BUT you don't need to concern yourself with those - you only need to learn the few up-to-date properties of Flexbox which turns out like below: Then you can copy that and add the prefixes automatically online –  https://autoprefixer.github.io/

                         

                         

                         

                        DESKTOP:

                         

                        .flex-box {

                        display: flex;

                        justify-content: center;

                        align-items: baseline;

                        padding: 40px 0;

                        }

                         

                        MOBILE MEDIA QUERY:

                         

                        @media screen and (max-width: 768px) {

                        .flex-box {

                        flex-direction: column;

                        align-items: center;

                        }

                        h6 {

                        padding: 15px 0 0 0;

                        }

                        }