CSS attributes to the Center content in 2 columns next to each other in a container

Hi all


I have a line/container Bootstrap with 2 columns.  I would like to place Center the text in the left column and an image in the right column, and I want to be located next to each other in the center of the container.  (See the diagram).  Anyone know how?

I could do it quite easily with margins, but I fear that this would produce a bad alignment/display on small devices.  I would like the text and image to stack and to focus on small devices.

Here is my HTML code:

< div class = "container" >

< section class = "row" id = "content of the header" >

< div class = "col-md-6" >

< h1 > wallpapers you will love! < / h1 >

< p > now you can express yourself every day with high quality wallpapers and enjoy and share funds. They are free! < /p >

< button type = "button" class = 'btn, btn-primary' > button < / COMING SOON >

< p > available on most Android devices. < /p >

< / div >

< div class = "col-md-6" > < img src = images/wallpapers_on_phone_2.png"" width = "284" height = "468" alt = "Christ - honoring Wallpapers to build your faith" > < / div >

< / section >

< / div >

CSSdesired-result.jpg

Also, can someone tell me how to find beyond channels/discussions in this Forum I participated in?


Thank you!

I put a 'height' on the .block-wrapper for the example, you must remove that:

. Block-wrapper {}

Display: table;

Width: 80%;

margin: 0 auto;

background-color: #FFC;

height: 500px;

}

Tags: Dreamweaver

Similar Questions

  • Place the items in the table next to each other on stage

    Hey guys,.

    I know I have to do something wrong that is easy and simple to fix, but I can't fix.

    I have a table called a frame of a movieclip and I want to place each image as a 'menu' on the stage.

    The problem I have is that I want to put each item in menu next to each other, but the only code I could find work is the 3D carousel.

    So I try to adapt this code to my needs.

    Where I'm going wrong? Any help would be great.

    Code below:

    package classes

    {

    import flash.display.MovieClip;

    com.greensock.*;//for interpolation ability to import

    import com.greensock.TweenLite;

    com.greensock.easing import. *;

    import flash.filters.BlurFilter;

    import flash.events.Event;

    import flash.utils.Timer;

    import flash.events.TimerEvent;

    import flash.display. *;

    import flash.events. *;

    import flash.sampler.StackFrame;

    SerializableAttribute public class extends MovieClip MenuSystem

    {

    private var blur: BlurFilter = new BlurFilter (0,0,1);

    private var holderMc:MovieClip = new MovieClip();

    private var radiusX:uint = 1200; / / width of the carousel

    private var rayonY: uint = 400; / / height of the carousel

    private var centerX:Number = 100; / / x position of the center of the carousel

    private var centerY: Number = 350; / / the position there from the center of the carousel

    private var speed: Number = 0.01; / / initial rotation of the carousel speed

    private var itemArray:Array = new Array(); / / store the items to sort them according to their 'depth' - see the sortBySize() function.

    public var navigationPopupInfo:NavigationPopupInfo = new NavigationPopupInfo();

    public void MenuSystem()

    {

    the constructor code

    We do support for the menu system serve

    addChild (holderMc);

    holderMc.y = - 200;

    Also add a listener to control the rotation of the speed menu

    / * addEventListener (MouseEvent.MOUSE_MOVE, OnMouseMoveHandler);

    */                    }

    public function initNavigationPop (): void

    {

    TweenMax.to (navigationPopupInfo, 0, {alpha: 0, 40-y:, blurFilter: {blurX:3, blurY:10}});}})

    holderMc.addChild (navigationPopupInfo);

    navigationPopupInfo.x = (-navigationPopupInfo.width / 2);

    TweenMax.to (navigationPopupInfo, 2, {delay: 1, alpha: 1, y: 10, ease:Elastic.easeOut});})

    TweenMax.to (navigationPopupInfo, 1, {delay: 1, blurFilter: {blurX:0, blurY:0}});}})

    }

    Place the vital elements on stage

    public void initRange(numOfMenuItems:Number):void

    {

    for (var i: uint = 0; i < numOfMenuItems; i ++)

    {

    var arrayBoxItem:String = ('model' + (i + 1) + '_');

    var itemMc:ItemMc = new ItemMc();

    public var angl:Number; belongs to the class of the element.

    Item class extends ItemInner in the library FLA.

    itemMc.angl = i * (400 / numOfHomeRangeItems);

    itemMc.alpha = 0.8;

    itemMc.name = (arrayBoxItem);

    trace (itemMc.Name);

    holderMc.addChild (itemMc);

    itemArray.push (itemMc);

    itemMc.itemHitter.buttonMode = true;

    itemMc.addEventListener (Event.ENTER_FRAME, enterFrameHandler);

    Listen MouseEvents only on the icons, not on reflection;

    itemMc.itemHitter.addEventListener (MouseEvent.CLICK, clickHandler);

    itemMc.itemHitter.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler);

    itemMc.itemHitter.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);

    itemMc.iconMc.gotoAndStop (arrayBoxItem);

    }

    }

    public void clickHandler(event:MouseEvent):void

    {

    clean your audience before doing anything else to release

    the user CPU resources

    for (var i: uint = 0; i < itemArray.length; i ++)

    {

    var itemMc:ItemMc = itemArray [i];

    itemMc.removeEventListener (Event.ENTER_FRAME, enterFrameHandler);

    itemMc.itemHitter.removeEventListener (MouseEvent.CLICK, clickHandler);

    itemMc.itemHitter.removeEventListener (MouseEvent.ROLL_OVER, rollOverHandler);

    itemMc.itemHitter.removeEventListener (MouseEvent.ROLL_OUT, rollOutHandler);

    Optional:;

    TweenLite.to (itemMc, 1, {scaleX:0, scaleY: 0, alpha: 0.1, ease:Elastic.easeInOut});})

    TweenMax.to (itemMc, 1, {blurFilter: {blurX:5, blurY:5}});}})

    to replace the carousel again see function reInit()

    FIND A WAY TO REMOVE ITEMS

    this.removeChild (itemMc);

    }

    Tabula Rasa, to prepare variables

    var variantName:String = event.target.parent.name;

    itemArray.splice ();

    If (variantName == "backBtn") {MovieClip (root) .reinitMenuSystem () ;}

    else {MovieClip (root) .addVariantPage (variantName) ;}

    }

    /////////////////////////////////////////////////////////////////////////////// /////////////////////// POSITION ITEMS IN CAROUSEL

    position items in the Menu

    public void enterFrameHandler(event:Event):void

    {

    Event.Target.x = centerX; / / position of the element x

    Event.Target.y = centerY / / position point y of

    Scale according to position point there to give the point of view

    / * var s:Number = event.target.y / (centerY + rayonY);

    event.target.scaleX = event.target.scaleY = s;

    Event.Target.angl += speed; / / speed is updated by OnMouseMoveHandler

    ADD DOF

    blur.blurX = - event.target.y / 10 + 21;

    blur.blurY = - event.target.y / 10 + 21;

    Event.Target.filters = [blur];

    Finally set the size of the elements

    sortBySize();

    */                    }

    /////////////

    Check the progress of ticks

    / / / TRI SIZE DETERMINE DEPTH OF ELEMENTS

    set the display list index (depth) of the elements according to their

    scaleX property so that the element, the index is high (depth)

    / * public function sortBySize (): void

    {

    It is not a property Array.ASCENDING DECLINING use and reverse()

    itemArray.sortOn ("scaleX", Array.DESCENDING |) Array.NUMERIC);

    itemArray.reverse ();

    for (var i: uint = 0; i < itemArray.length; i ++)

    {

    var itemMc:ItemMc = itemArray [i];

    holderMc.setChildIndex (itemMc, i);

    }

    }

    */

    /////////////////////////////////////////////////////////////////////////////// /////////////////////// ITEMS WHEN ROLLOVER & OUT

    public void rollOverHandler(event:MouseEvent):void

    {

    var currentModel:String = event.target.parent.iconMc.parent.name;

    Event.Target.parent.alpha = 1;

    TweenLite.to (event.target.parent.iconMc.tooltipMc, 1, {alpha: 1, y:-40, ease:Elastic.easeOut});})

    event.target.parent.iconMc.tooltipMc.tipHeader.gotoAndStop (currentModel);

    }

    function rollOutHandler(event:MouseEvent):void

    {

    Event.Target.parent.alpha = 0.8;

    TweenLite.to (event.target.parent.iconMc.tooltipMc,.5, {alpha: 0, y:-27});})

    }

    / / / ITEMS IN THE CAROUSEL MOVEMENT ACCORDING TO THE POSITION OF THE MOUSE

    /*

    Update of the speed at which the carousel turns accoring to the distance of the mouse since the center of the stage. The variable speed is only updated when the mouse is over the point Sprites.

    */

    / * function mouseMoveHandler(event:MouseEvent):void public

    {

    Speed = (mouseX - centerX) / 20000;

    }

    */          }

    }

    I have a table called a frame of a movieclip and I want to place each image as a 'menu' on the stage

    This code will take a MovieClip in your library with the link ("Menuitem") that has 5 labeled keyframes "menuitem 1 «...» "" menuitem 5 ', it is adapted accordingly to your stagesize and distribute, and align the elements at the top from left to right:

    I havemport flash.display.MovieClip;

    var menu_Array:Array = new Array();

    the var menu: MovieClip = new MovieClip();

    var stageWidth:int = stage.stageWidth;

    var menuWidth:int = 0;

    for (var i: int = 0; i<5;>

    {

    var menuItem:Menuitem = new Menuitem();

    menuWidth += menuItem.width;

    menu_Array.push (MenuItem);

    }

    function distrbuteAndAlignItems(_menu:MovieClip,_array:Array):void

    {

    var scaleFactor:Number = stageWidth / menuWidth;

    var xAdjustment:Number;

    trace (scaleFactor);

    for (var j: int = 0; j<_array.length;>

    {

    MovieClip(_array[j]).scaleX = MovieClip(_array[j]).scaleY = scaleFactor;

    for (var k: int = 0; k

    {

    xAdjustment += MovieClip(_array[j]).width;

    }

    _ARRAY [j] .x = xAdjustment;

    _ARRAY [j].gotoAndStop(j+1);

    xAdjustment = 0;

    _Menu. AddChild (_ARRAY [j]);

    }

    addChild (_menu);

    }

    distrbuteAndAlignItems (menu, menu_Array);


    If that's what you're looking for...

  • How to display multiple windows next to each other on top of the other in the bottom task bar

    When I open a new Firefox window, he stacked it on top of all others in the taskbar at the bottom. I wish they were next to each other. He used to do this. Now, I have to hover over the element ONLY Firefox in the bottom task bar and read the list to find the one I want to go to. It is a waste of time and tedious.

    How can I change this?

    I think that this is governed by your general taskbar setting. Please see the screenshot joint. To get this dialog box, right-click an empty area of the taskbar, and then choose Properties.

  • How to select and move more than one bookmark at a time? Shift + click selects multiple items that are next to each other in a list, because the element

    How to select and move more than one bookmark at a time?
    Shift + click selects multiple items that are next to each other in a list, because the items open in firefox before that happens.

    Glad it worked for you. Thanks for posting back.

  • moving the regions next to each other

    Hi all

    db11gxe, apex 4.0, firefox 24,

    I have areas on the page, but there is one under the other, I want them next to each other, how?

    after resizing the width of their

    For the layout of the area, please see figure 5-70.

  • How can I get the chart inserted with "Senior officer" at the center inside a table column?

    I'm trying to insert graphics into the columns of the table using 'Frame' above, but the inserted chart, don't Center not within the column, such as the text of paragraph. Horizontal alignment settings seems to be ignored for the chart.

    I can solve this problem by changing the image containing the graph in the reference page, alternatively by changing the margins of cell parameter in the paragraph designer but neiter of these solutions is really good. I would like a solution that really centers the chart in the column of table not only simulates, as I like it to be compatible with the design of future changes in master pages, etc. of lika.

    Is there a nice way to fix this?

    It seems rather as if senior / lower frame is always aligned to the left. This isn't just a problem of Table. It does the same thing in ordinary text blocks.

    I worked in a store, at home, we knew as our column width (which was constant) and controlled the placement of art in affecting the graphic block of reference Page at the address named full column width, then precisely position the art to the breast.

    Were I faced with columns or cells of variable thickness, I had probably not use FA/FB, but rather a framework anchored in graphic design, anchored at the point of Insertion, to a specific tag para (say CellAnchor), which is centered. The NextPgfTag would be CellBody.

  • I have the options set to enable cookies and accept each other. Hoswever, when I run Firefox, it continues to come and say that cookies are disable?

    I followed the instructions on how to enable cookies. However, it doesn't seem to work as I continue to get the message that cookies are not enabled?

    Hello, please go through these steps: Web sites say cookies are blocked - pledge

  • The toolbars in my FF piled - how can I put next to each other?

    I work with V25.0 FF.

    The bar with the symbol of the FF, the file/modify... current bar, and TAB of the web page are stacked.
    I would like to put them on a line - is it possible?
    I appreciate your comments.
    Best regards
    Henning

    That is supports be able to drag and drop a toolbar in the empty space to another toolbar, both the same level of occupation. This can save a lot of space, especially for small toolbars or those in which only a few icons should be visible. That would be a feature to emulate in Firefox.
    And for those of us who love the tabs directly above the page web, it would be nice to be able to use the space on the top level, next to the orange Firefox button, for example toolbar buttons.
    Or one of these possible is currently? I use FF 26.0
    Thank you

     -cj
    
  • The links are crammed with words that overlap each other

    When I do a search, the page with many links, however, the words are not readable because they are crowded together.  The same thing happens on Facebook.  I did my icons, but that has not solved the problem. Tried system restore and it didn't restore.

    While you are on a website with this problem, hold down the CTRL key while you press the 0 (zero) in the upper part of the keyboard and see if it resets the size of text for more overlap.

  • In photoshop 13, why are my photos turned up next to each other without a space to show the info or set button.

    My imported photos have no space between them in the Organizer.  He won't show information or the game version extend your button.  It's in the photoshop elements 13

    Switch to Classic view using CTRL & D or going to the View menu and checking the details.

    Brian

  • Two servers in the same vlan, DMZ can be firewall with each other?

    I have a Windows server vm on a DMZ, and I need to add another soon.  We need to separate these two servers so that neither can see the other, but they must be on the same vlan.  I'm looking for in vShield, but do not have this installer again.  VShield will be able to separate them, or someone has a better suggestion?

    Hello

    Ah, your physical switch uses VLAN private for your guests. If you use a distributed virtual switch, you can configure one by VM PVLAN allowing entrants but no communication between the nodes.

    If you are using VMsafe you can achieve the same thing using the policy that denies the communication to the VM in VM virtual machines via subnet blocks but allows access from your firewall.

    VMsafe and vShield Zones are two distinctly different firewall technologies. vShield Zones is a firewall device VMsafe-net is located just before the vNIC on penetration or just after on the output of the vNIC. Each of the different problems, but for this use case, VMsafe can be the best way to go.

    If you do not have an Enterprise Plus license then you cannot use the virtual distributed switches so PVLANs may not work for you.

    Best regards
    Edward L. Haletky VMware communities user moderator, VMware vExpert 2009, 2010

    Now available: url = http://www.astroarch.com/wiki/index.php/VMware_Virtual_Infrastructure_Security'VMware vSphere (TM) and Virtual Infrastructure Security' [/ URL]

    Also available url = http://www.astroarch.com/wiki/index.php/VMWare_ESX_Server_in_the_Enterprise"VMWare ESX Server in the enterprise" [url]

    Blogs: url = http://www.virtualizationpractice.comvirtualization practice [/ URL] | URL = http://www.astroarch.com/blog Blue Gears [url] | URL = http://itknowledgeexchange.techtarget.com/virtualization-pro/ TechTarget [url] | URL = http://www.networkworld.com/community/haletky Global network [url]

    Podcast: url = http://www.astroarch.com/wiki/index.php/Virtualization_Security_Round_Table_Podcastvirtualization security Table round Podcast [url] | Twitter: url = http://www.twitter.com/TexiwillTexiwll [/ URL]

  • How to upgrade column depend on each other in the same table

    Hello

    I have the following table with 2 colomns (A and B)


    A AND B

    100 null
    90 null
    80 null
    70 null
    60 null


    I want to spend the first 2 max number in column B to be like this

    A AND B

    80 100
    70 90
    60 null


    and help him please.
    with t as ( select 100 A, null B from dual union
                   select 90, null from dual union
                   select 80 ,null from dual union
                   select 70, null from dual union
                   select 60, null from dual)
          select A, B
          from t
          model
          dimension  by (row_number() over (order by A desc) num )
          measures (A, cast (null as number)  B, count(*) over ()  cnt )
          RULES (
                 B [for num from 1 to 2  increment 1] =  A[cv()],
                 A[for num from 1 to cnt[1] increment 1] =  A[cv() + 2]
                )          
    
    A     B
    80     100
    70     90
    60
    

    Published by: pollywog on June 15, 2011 15:44

    or if you have 11g there is now a function called nth_value

    /* Formatted on 6/15/2011 4:03:51 PM (QP5 v5.149.1003.31008) */
    WITH t AS (SELECT 100 A, NULL B FROM DUAL
               UNION
               SELECT 90, NULL FROM DUAL
               UNION
               SELECT 80, NULL FROM DUAL
               UNION
               SELECT 70, NULL FROM DUAL
               UNION
               SELECT 60, NULL FROM DUAL)
      SELECT LEAD (A, 2) OVER (ORDER BY A DESC) A,
             CASE
                WHEN A < NTH_VALUE (MAX (A), 2) OVER (ORDER BY A DESC) THEN NULL
                ELSE A
             END
                B
        FROM t
    GROUP BY A
    

    Published by: pollywog on June 15, 2011 16:04

  • Remove frames of related texts that has the same content

    Hi Forum,

    I have this script, this will remove all the textFrame which contained © LW...

    There are several managers of related texts which contained © LW.

    I want to keep a block of text that has content © LW in it.and remove all others textFrame which contained © LW.

    myDoc var = app.activeDocument;

    var myPageItems = myDoc.allPageItems;

    for (var i = 0; i < myPageItems.length; i ++) {}

    App.Select (myPageItems [i]);

    mySel var = app.selection [0];

    var Cont = app.selection.contents;

    try {}

    mySel.locked = false;

    } catch (e) {};

    If (mySel.constructor.name == "TextFrame") {}

    If (mySel.contents == "© LW") {}

    try {}

    If (mySel.contents > 1) {}

    mySel.remove ();

    }

    } catch (e) {};

    }

    App.Selection = null;

    }

    }

    Thank you...

    myDoc var = app.activeDocument;

    ignore the var = true;

    var allFrames = myDoc.allPageItems;

    While (t = allFrames.pop ()) {}

    If (t instanceof TextFrame & t.contents == "© LW" & jumping == false) {}

    t.Locked = false;

    t.Remove ();

    }

    Else if (t instanceof TextFrame & t.contents == "© LW" & skip == true) {}

    jumping = false;

    }

    }

  • How can I get lines to work alongside the other instead of below each other

    Hi, I am a complete novice with limited technical capacity and try to learn the bootstrap, I want a provision which consists of a large image or movie to the left of the page and a few rows of images in front of the right. Is it possible to put the lines next to each other instead of below the other? I have sort of this successful using the tag ASIDE on a line, but am unsure if this will cause problems when the site is published. Also is it possible to place an image or a text on the greyed out the column when he has been compensated? Any help would be received with gratitude by the beginner difficulty

    If you are a perfect beginner with limited technical capacity, Bootstrap is not a good place to start. To work properly with Bootstrap, you need a pretty good knowledge of HTML and CSS.

    That said, to answer your questions:

    • No, you cannot "bootstrap" rows side by side. The question of a line, it's that it spans the entire width of its container. However, you can nest rows within a column. You can do one of the reasons are a top element on one side of the page with two or more lines of smaller elements on the right.
    • No, you can't put anything into space alongside a column that was offset. The idea of compensation is to leave space on the left flank.

    If you have a subscription to lynda.com, you can learn much more about the use of bootstrap in Dreamweaver CM³. I have published a course called Responsive Design with Bootstrap and Dreamweaver CC 2015. It is not free, but you can get a free 10-day trial (free trial version does not include the sample files).

  • How do browser windows on the background overlay each other instead of align side by side

    I want to stack the ID of windows on the bottom of the screen on the other as group rather seeing each lining up next to each other from left to right

    I have not used Windows XP for a while... The steps in this article do you want?

    https://www.Microsoft.com/resources/documentation/Windows/XP/all/proddocs/en-us/win_tray_taskbar_groupitems_howto.mspx

Maybe you are looking for

  • Slow speed

    Often, he slows to an analysis not only on downloads but just typing as well as the opening of the apps/programs/whathaveyo. End-2011 17-inch MacBook Pro. Latest operating system is installed. A lot of memory on computer and on iCloud.

  • Update of FF 18.0.2, now FF crashes at startup

    I upgraded FF 18.0.2. Update immediately after FF crashes at startup. FF is running in safe mode.Crash ID: bp-f138d304-0040-4ac9-b51e-ab8c12130206 Please notify. Thank you.

  • Satellite 3000 - X 11: four beeps on startup, white screen

    Hi people,A friend gave me a laptop to try and fix. It's a Toshiba Satellite 3000 - X 11.Sometimes, it works very well. Starts as usual.Sometimes, quite randomly, it will not start. In this case nothing will come on the screen at startup. The fan wil

  • After claire instaltion, Windows Update in Windows 7 keep control, is not download anything

    Hi all Recently, I have this problem with Windows 7. I have installed Windows 7 on my PC company, after the seizure of license, I have check for update. The progress bar continues looking for a day - in the morning to the evening, and nothing had hap

  • SPA303 pending

    Hello I have 3 SPA303 CISCO with the status "pending". The Admin login in the Web interface returns 403 forbidden. Ive tried a factory reset but no luck. Connected the SPA303 to my laptop with a local DHCP server, but still the same. How to solve thi