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>

asked Nov 24 '18 at 12:47

Vrushali

215

add a comment |

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>

asked Nov 24 '18 at 12:47

Vrushali

215

add a comment |

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>

asked Nov 24 '18 at 12:47

Vrushali

215

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>

html css

asked Nov 24 '18 at 12:47

Vrushali

215

asked Nov 24 '18 at 12:47

Vrushali

215

asked Nov 24 '18 at 12:47

Vrushali

215

asked Nov 24 '18 at 12:47

Vrushali

215

asked Nov 24 '18 at 12:47

Vrushali

215

add a comment |

4 Answers
4

active

oldest

votes

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.

answered Nov 24 '18 at 13:01

Dries Augustyns

146

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

add a comment |

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>

answered Nov 24 '18 at 14:08

callOfCode

53448

add a comment |

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.

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

add a comment |

-1

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:)

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458303%2fwant-to-put-button-below-vertically-centered-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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.

answered Nov 24 '18 at 13:01

Dries Augustyns

146

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

add a comment |

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.

answered Nov 24 '18 at 13:01

Dries Augustyns

146

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

add a comment |

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.

answered Nov 24 '18 at 13:01

Dries Augustyns

146

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.

answered Nov 24 '18 at 13:01

Dries Augustyns

146

answered Nov 24 '18 at 13:01

Dries Augustyns

146

answered Nov 24 '18 at 13:01

Dries Augustyns

146

answered Nov 24 '18 at 13:01

Dries Augustyns

146

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

add a comment |

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

I would like the content div to be at vertical center of screen. If position value is changed then div does not remain at center.

– Vrushali
Nov 24 '18 at 13:16

add a comment |

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>

answered Nov 24 '18 at 14:08

callOfCode

53448

add a comment |

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>

answered Nov 24 '18 at 14:08

callOfCode

53448

add a comment |

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>

answered Nov 24 '18 at 14:08

callOfCode

53448

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>

answered Nov 24 '18 at 14:08

callOfCode

53448

answered Nov 24 '18 at 14:08

callOfCode

53448

answered Nov 24 '18 at 14:08

callOfCode

53448

answered Nov 24 '18 at 14:08

callOfCode

53448

add a comment |

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.

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

add a comment |

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.

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

add a comment |

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.

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

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.

 .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>

 .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>

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

edited Dec 23 '18 at 18:57

answered Nov 24 '18 at 21:17

Alex Leo

7771213

answered Nov 24 '18 at 21:17

Alex Leo

7771213

answered Nov 24 '18 at 21:17

Alex Leo

7771213

add a comment |

-1

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:)

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

add a comment |

-1

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:)

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

add a comment |

-1

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:)

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

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:)

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

answered Nov 24 '18 at 18:52

Madhubala Jayakumaran

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk