Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    1
    Member #
    51378

    Unable to center a link tag perfectly in its parent Div tag(Bootstrap)

    Need to adjust the link tag (Read More) button exactly at the center of the image DIV (col-md-6 id="leftDiv"). Help? I am able to achieve this by applying the link with "absolute" positioning and left and top values, but on resizing window its all getting messed up?

    Already tried margin 0 auto settings with float left, but nothing seems to respond , I think because of background image?

    Thanks.

    <style>
    #outerRow{
    background-color:rgba(135,75,76,1.00);
    }
    #leftDiv{
    background-color:rgba(142,122,71,1.00);
    background-image:url(../bootstrap-3.3.5-dist%20-%20Copy/images/download.jpg) ;
    background-position: center;
    background-size:cover;
    background-repeat:no-repeat;
    height:400px;
    float:left;
    margin:0 auto;
    }
    #leftDiv a{
    color:white;
    font-size:3vw;
    border:white solid medium;
    padding:1vw;
    float:left;
    text-align:center;
    margin:0 auto;
    }
    #rightDiv{
    background-color:rgba(73,140,75,1.00);
    padding:30px;
    height:400px;
    }
    #rightDiv p{
    font-size:1.3vw;
    }
    </style>
    </head>
    <body>

    <div class="container-fluid">
    <div class="row" id="outerRow">
    <div class="col-lg-6 col-md-6 col-sm-6" id="leftDiv" ><a href="#">Read More</a></div>
    <div class="col-lg-6 col-md-6 col-sm-6" id="rightDiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, repellendus quia amet similique voluptas. Consequatur, voluptates, ad iste non eum sit numquam commodi ipsam ullam ut quibusdam unde iure nesciunt.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, repellendus quia amet similique voluptas. Consequatur, voluptates, ad iste non eum sit numquam commodi ipsam ullam ut quibusdam unde iure nesciunt.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, repellendus quia amet similique voluptas. Consequatur, voluptates, ad iste non eum sit numquam commodi ipsam ullam ut quibusdam unde iure nesciunt.</p></div>
    </div>

    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../bs/js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bs/js/bootstrap.js"></script>
    </body>
    </html>


    Untitled-1.jpg
    Last edited by cgaish; Aug 02nd, 2015 at 02:00 AM.

  2.  

  3. #2
    Junior Member zaktomlinson's Avatar
    Join Date
    Apr 2015
    Posts
    12
    Member #
    49476
    Liked
    4 times
    This seems to work:

    #leftDiv a{
    color:white;
    font-size:3vw;
    border:white solid medium;
    padding:1vw;
    float:left;
    text-align:center;
    margin:0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com