CODEWITHSUNDEEP
htmlcsspug
csTroubled
csTroubled

Reputation: 387

Center button inside div, ignoring other elements

I've got the following:

div.div
  p.paragraph
    | about 3 lines of text... (dynamic)
  button.button-i-want-to-center
    | click_me

I want it to look like this:

___________________________
| Text.....................|
| Text.....................|
| Text.....................|
|          ______          |
|         |BUTTON|         | <--- Center of div: 
|                          |      I want the button to ignore 
|                          |      the text.
|                          |
|                          |
___________________________

Keeping in mind that the size of the div is dynamic.

How can I achieve this? I tried flex, but didn't do the trick. Fixed margins are no good either.

Upvotes: 8

Views: 4845

Answers (6)

ab29007
ab29007

Reputation: 7766

You should use position:absolute; on the button position:relative; on the div. See this example:

div{
    position:relative;
  height:180px;
  background-color:green;
    }
    
button{
    position:absolute;
    top:calc(50% - 15px);
    left:calc(50% - 50px);
    height:30px;
    width:100px;
}
<div>
<p>
  lines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of text
</p>
<button>Click me</button>
</div>

Upvotes: 5

Jishnu V S
Jishnu V S

Reputation: 8409

There are lot of ways to do this , but You can simply do this with text-align:center; or margin:0 auto; see the snippet below

html,body{
  height:100%;
  width:100%;
  background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg");
  background-size:cover;
  margin:0;
}
.wrapper {
  float:left;
  width:100%;
  text-align:center;
}
p{
  color:#fff;
}
button {
  display:block;
  margin:0 auto;
}
<body>
<div class="wrapper">
    <p> some texts here </p>
    <p> other texts here other texts here other texts here  </p>
    <button class="button">Button</button>
</div>
</body>

or you want the text left and button only centerd use text-align:left

html,body{
  height:100%;
  width:100%;
  background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg");
  background-size:cover;
  margin:0;
}
.wrapper {
  float:left;
  width:100%;
  text-align:left;
}
p{
  color:#fff;
}
button {
  display:block;
  margin:0 auto;
}
<body>
<div class="wrapper">
    <p> some texts here </p>
    <p> other texts here other texts here other texts here  </p>
    <button class="button">Button</button>
</div>
</body>

Upvotes: 1

bugscoder
bugscoder

Reputation: 425

You can try this:

  1. Outer div set as position: relative;

  2. For the div that you can to set middle, create a class with the following css:

    .center {
   position: absolute;
   margin: auto;
   top: 0; bottom: 0;
   left: 0; right: 0;
 }

Upvotes: 1

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

you can use css3 flexbox concept

html,body{
  height:100%;
  width:100%;
  }
.wrapper {
           display:flex;
  justify-content:center;
           width:100%;
           height:100%;
           background-image: url("https://i.sstatic.net/wwy2w.jpg");
           background-repeat:no-repeat;
           background-size:cover;
           
     }

    .button {
     position:absolute;
      align-self:center;
    }
p{
  color:white;
  }
<div class="wrapper">
   <p> other texts</p>
        <button class="button">Button</button>
    </div>

Upvotes: 3

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use display: block & margin: 0 auto, like:

button {
  display: block;
  margin: 20px auto;
  font-size: 20px;
}

Have a look at the snippet below:

button {
  display: block;
  margin: 20px auto;
  font-size: 20px;
}
<div class="content-holder">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consectetur, saepe. Praesentium doloribus dolorum qui nisi rem veniam iure. Ducimus, harum, molestiae. Harum consequatur cum accusantium fugiat, reiciendis repudiandae iste!
  <button>Button</button>
</div>

Hope this helps!

Upvotes: 2

Jagajit Prusty
Jagajit Prusty

Reputation: 2110

wrapper{
display: flex;
justify-content : center;
}

or 

wrapper{
position : relative;
}
.button{
position: absolute;
top : 50%;
left : 50%;
}

Upvotes: 0

Related Questions