CODEWITHSUNDEEP
htmlcss
Vrushali
Vrushali

Reputation: 43

Want to Put button below vertically centered DIV

I have 3 divs in page. 1st for logo, second for contents which I have vertically centered and last for button which will then let user navigate to another section/page.

I am trying to put button below centered div but somehow it is appearing below logo.

I would like this page to be displayed appropriately on both desktop and different mobiles hence I am not using fixed bottom margin.

Please let me know if I am missing something.

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        .center-div
        {
          position: absolute;
          top: 50%;
          left:50%;
          margin-right:-50%;
          transform: translate(-50%,-50%);
          width:100%;
          border: 3px solid red;
          background-color:peachpuff;
          text-align:center;
        }
    </style>      
</head>
<body>
    <div>
        <div>
                <h1>Logo</h1>
        </div>  
        <div class="center-div">
            <h1>Title of paragraph</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
        </div>
        <div style="text-align:center;">
            <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a> 
        </div>
    <div>
</body>
</html>

Upvotes: 3

Views: 93

Answers (4)

Alex Leo
Alex Leo

Reputation: 2851

You can achieve the desired disposition with some simple CSS.

I have made you an example here:

 .center-div {
   border: 3px solid red;
   background-color: peachpuff;
   text-align: center;
   margin: 10px;
 }

 .logo {
   text-align: center;
 }

 .myButton {
   text-align: center;
 }
  <div>
    <div class="logo">
      <h1>Logo</h1>
    </div>
  </div>
  <div>
    <div class="center-div">
      <h1>Title of paragraph</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.</p>
    </div>
  </div>
  <div>
    <div class="myButton">
      <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a>
    </div>
  </div>

In your post you mentioned "I would like this page to be displayed appropriately on both desktop and different mobiles hence I am not using fixed bottom margin."

You can have this behavior by using either Bootstrap Columns or Foundation Columns. they very helpful in resizing your content for different viewports.

If you use foundation you could have the following:

<div class="row">
   <div class="small-2 large-4 columns myButton">

In this case the column will auto-resize an take a space up to 2 in small viewports. Meanwhile for medium and above(tablets, desktops) it will take 4.

Upvotes: 0

Madhubala Jayakumaran
Madhubala Jayakumaran

Reputation: 39

Just remove the "position" and "transform" attribute from the ".center-div" styling!! Then remove the "text-align" & add some "padding-left" to the button.. I hope it'll work:)

Upvotes: -1

callOfCode
callOfCode

Reputation: 1026

You can achieve this without positioning. Use display:table for container and display: table-cell; vertical-align: middle for content. Also you must to set height 100% for html/body and container elements. P.S. Display table and table-cell will not work on IE7. But this browser is a history. Use it freely. Here is good article about this (don't be decieved by it's title).

And this is the code you need:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        html,body {height: 100%;}

        .container{
            display: table;
            height: 100%;
        }

        .content-wrapper{
            display: table-cell;
            vertical-align: middle;
        }

        .link{
            text-align: center;
        }
    </style>      
</head>
<body>
    <header>
            <h1>Logo</h1>
    </header>
    <div class="container">
        <div class="content-wrapper">
            <div>
                <h2>Title of paragraph</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
            </div>
            <div class="link">
                <a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a> 
            </div>
        </div>
    </div> 
</body>
</html>

Upvotes: 1

user8598610
user8598610

Reputation:

I'm not sure that this is the result that you want but if you change the position: absolute; to position: relative; then they will be put in the right order.

Upvotes: 1

Related Questions