0

Hi Please see the following image enter image description here

Here i want to make the button of first div in the vertical middle of the div and i want to make the 2 div responsive also . Please see my code .

I tried to make it middle using negative margin but still no luck . Please help .

.but-new{
margin-top:-20px;
}
.nm-1{
    margin-top: -212px;
    margin-left: 133px;
    border-radius: 2px;
}

.all-bb{
display: block;
width: 100%;
overflow: hidden;
margin-top:22px;

}
.main-img{
  background-image: url('https://i.postimg.cc/hGFfjpLM/NEW-2.jpg');
  height: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
background-repeat: no-repeat;
max-width: 890px;
overflow: hidden;
}


.b-h2 {
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #383e40 !important;
    font-size: 24px !important;
     font-weight: 400 !important;
    margin: 0 0 0 0 !important;
    padding-top: 13px !important;
    text-transform: uppercase !important;
   padding-bottom: 10px !important;
}

.con-righ{
  color:white;
  display: inline-block;
  max-width:90%;
background: #000000ab;
    padding: 36px;
    border-radius: 6px;
}

.con-left{
  color:white;
  display: inline-block;
  max-width:90%;
background: #000000ab;
    padding: 36px;
    border-radius: 6px;
}
.new-h4 {
 color: white;
 
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
font-size: 32px;
    line-height: 36px;
    font-weight: 400;
    margin: 0 0 0 0;
}
.con-righ p{
    font-size: 17px;
    padding-top: 17px;
    padding-bottom: 17px;
    line-height: 25px;
  padding-right: 23px
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 15px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="container">
<div class="all-bb">

<div class="arri-light col-sm-12 col-md-4">

 <img src="https://i.ibb.co/jH5bTZ6/NEW-1.jpg"> 
 <a class="but-red but-new" href="#"> View  Projects</a>

</div>


<div class="main-img col-sm-12 col-md-8">
  <div class="con-righ">
     <h4 class="new-h4">LOREM IPSUM</h4>
     <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

 </p>
     <a class="but-red" href="#"> View  Projects</a>
  </div>

</div></div></div>

Here in the first div portion i have another image . So that i can replace it when the small image not fit.

Abilash Erikson
  • 341
  • 4
  • 26
  • 55

2 Answers2

1

Try this....

I added this CSS to make the button of first div in the vertical and horizontal center of the div.

.but-new {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%); 
}

DEMO

user3733831
  • 2,886
  • 9
  • 36
  • 68
0

These are 2 simple responsive examples of center the buttons middle of the Div. You can use the div wherever you want. I hope you it helps you :)

.container1{
  border:1px solid red;
  padding:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.container2{
  border:1px solid green;
  padding:30px;
  display:block;
  position:relative;
}

.container2 .btn {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}


.mb-sm{margin-bottom:60px;}
<div class="container1 mb-sm">
  <button>Example1</button>
</div>


<div class="container2">
  <button class="btn">Example2</button>
</div>
Hasansab Takked
  • 81
  • 6